From aa39f42cd289fbc71c43f3a488bbded092c57028 Mon Sep 17 00:00:00 2001
From: Cooper Ransom <cooperransom08@outlook.com>
Date: Mon, 1 Apr 2024 23:50:11 -0400
Subject: [PATCH] Advertise admin panel on settings page

---
 src/assets/locales/en.json              |  5 +++++
 src/pages/Settings.tsx                  |  2 ++
 src/pages/parts/settings/AdminPanel.tsx | 30 +++++++++++++++++++++++++
 3 files changed, 37 insertions(+)
 create mode 100644 src/pages/parts/settings/AdminPanel.tsx

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index ad4bb0f8..54c31827 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -490,6 +490,11 @@
         "editProfile": "Edit",
         "logoutButton": "Log out"
       },
+      "admin": {
+        "title": "Admin panel",
+        "text": "See and use tools used to test sudo-flix's condition.",
+        "button": "Check it out"
+      },
       "actions": {
         "delete": {
           "button": "Delete account",
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index b6bf4fc4..c56754d7 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -36,6 +36,7 @@ import { useSubtitleStore } from "@/stores/subtitles";
 import { usePreviewThemeStore, useThemeStore } from "@/stores/theme";
 
 import { SubPageLayout } from "./layouts/SubPageLayout";
+import { AdminPanelPart } from "./parts/settings/AdminPanel";
 import { PreferencesPart } from "./parts/settings/PreferencesPart";
 
 function SettingsLayout(props: { children: React.ReactNode }) {
@@ -260,6 +261,7 @@ export function SettingsPage() {
             <RegisterCalloutPart />
           )}
         </div>
+        <AdminPanelPart />
         <div id="settings-preferences" className="mt-48">
           <PreferencesPart
             language={state.appLanguage.state}
diff --git a/src/pages/parts/settings/AdminPanel.tsx b/src/pages/parts/settings/AdminPanel.tsx
new file mode 100644
index 00000000..1f656439
--- /dev/null
+++ b/src/pages/parts/settings/AdminPanel.tsx
@@ -0,0 +1,30 @@
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+
+import { Button } from "@/components/buttons/Button";
+import { SolidSettingsCard } from "@/components/layout/SettingsCard";
+import { Heading3 } from "@/components/utils/Text";
+
+export function AdminPanelPart() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  return (
+    <div>
+      <SolidSettingsCard
+        paddingClass="px-6 py-12"
+        className="grid grid-cols-2 gap-12 mt-5"
+      >
+        <div>
+          <Heading3>{t("settings.account.admin.title")}</Heading3>
+          <p className="text-type-text">{t("settings.account.admin.text")}</p>
+        </div>
+        <div className="flex justify-end items-center">
+          <Button theme="purple" onClick={() => navigate("/admin")}>
+            {t("settings.account.admin.button")}
+          </Button>
+        </div>
+      </SolidSettingsCard>
+    </div>
+  );
+}