Advertise admin panel on settings page

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",

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}

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>
+  );
+}