fix: dashboard v2

apps/next/public/static/locales/en/common.json

@@ -318,6 +318,14 @@
     "username_tooltip": "Lorem ipsum dolor sit amet.",
     "update_action": "Update profile"
   },
+  "accountSettings": {
+    "title": "Account",
+    "description": "Manage your account settings such as password, security, and other account-related preferences."
+  },
+  "appearanceSettings": {
+    "title": "Appearance",
+    "description": "Adjust the visual appearance of the website, including themes, colors, and other display options."
+  },
   "profileAvatar": {
     "title": "Set Profile Picture",
     "description": "Upload a photo and change your profile picture"

apps/next/public/static/locales/tr/common.json

@@ -289,6 +289,14 @@
     "username_tooltip": "Lorem ipsum dolor sit amet.",
     "update_action": "Profili Güncelle"
   },
+  "accountSettings": {
+    "title": "Hesap",
+    "description": "Parola, güvenlik ve diğer hesap tercihlerinizi yönetin."
+  },
+  "appearanceSettings": {
+    "title": "Görünüm",
+    "description": "Web sitesinin görsel görünümünü, temaları, renkleri ve diğer görüntüleme seçeneklerini ayarlayın."
+  },
   "public_dictionaries": {
     "title": "Yayınlanmış sözlüklerden öğrenin",
     "description": "Wordigo ile dil becerilerinizi geliştirmek için yayınlanmış sözlüklere göz atın. Kategori, seviye veya dil filtreleri ile size uygun olanı kolayca bulun.",

apps/next/src/components/Dashboard/Settings/AccountForm/index.tsx

@@ -0,0 +1,13 @@
+import Container from "../SettingsContainer";
+import React from "react";
+
+export default function AccountForm() {
+  return (
+    <Container
+      tTitle="accountSettings.title"
+      tDescription="accountSettings.description"
+    >
+      AccountForm
+    </Container>
+  );
+}

apps/next/src/components/Dashboard/Settings/AppearanceForm/index.tsx

@@ -0,0 +1,13 @@
+import Container from "../SettingsContainer";
+import React from "react";
+
+export default function AppearanceForm() {
+  return (
+    <Container
+      tTitle="appearanceSettings.title"
+      tDescription="appearanceSettings.description"
+    >
+      AppearanceForm
+    </Container>
+  );
+}

apps/next/src/components/Dashboard/Settings/ProfileForm/index.tsx

@@ -1,3 +1,4 @@
+import Container from "../SettingsContainer";
 import ProfileUploadAvatar from "./Avatar.profile";
 import CButton from "@/components/UI/Button";
 import CInput from "@/components/UI/Input/Input";
@@ -79,14 +80,10 @@ export default function ProfileForm() {
   }, [status]);
 
   return (
-    <div className="space-y-4 max-w-3xl">
-      <div>
-        <h3 className="text-lg font-medium">{t("profileSettings.title")}</h3>
-        <p className="text-sm text-muted-foreground">
-          {t("profileSettings.description")}
-        </p>
-      </div>
-      <Separator />
+    <Container
+      tDescription="profileSettings.description"
+      tTitle="profileSettings.title"
+    >
       <Form {...form}>
         <form
           onSubmit={form.handleSubmit(handleSubmit)}
@@ -147,6 +144,6 @@ export default function ProfileForm() {
           </CButton>
         </form>
       </Form>
-    </div>
+    </Container>
   );
 }

apps/next/src/components/Dashboard/Settings/Settings.tab.ts

@@ -0,0 +1,19 @@
+export interface ISettingsTab {
+  name: string;
+  value: string;
+}
+
+export const SettingsTabs: ISettingsTab[] = [
+  {
+    name: "profileSettings.title",
+    value: "profile",
+  },
+  {
+    name: "accountSettings.title",
+    value: "account",
+  },
+  {
+    name: "appearanceSettings.title",
+    value: "appearance",
+  },
+];

apps/next/src/components/Dashboard/Settings/SettingsContainer/index.tsx

@@ -0,0 +1,23 @@
+import { Separator } from "@wordigo/ui";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+export interface IProps {
+  children?: React.ReactNode;
+  tTitle: string;
+  tDescription: string;
+}
+
+export default function index({ children, tTitle, tDescription }: IProps) {
+  const { t } = useTranslation();
+  return (
+    <div className="space-y-4">
+      <div className="mt-5">
+        <h3 className="text-lg font-medium">{t(tTitle)}</h3>
+        <p className="text-sm text-muted-foreground">{t(tDescription)}</p>
+      </div>
+      <Separator />
+      {children}
+    </div>
+  );
+}

apps/next/src/components/Dashboard/Settings/index.tsx

@@ -0,0 +1,34 @@
+import AccountForm from "./AccountForm";
+import AppearanceForm from "./AppearanceForm";
+import ProfileForm from "./ProfileForm";
+import { SettingsTabs } from "./Settings.tab";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@wordigo/ui";
+import { useTranslation } from "next-i18next";
+
+export default function index() {
+  const { t } = useTranslation();
+  return (
+    <Tabs defaultValue="profile" className="w-full">
+      <TabsList className="grid w-fit grid-cols-3 gap-1">
+        {SettingsTabs.map((tab, index) => (
+          <TabsTrigger
+            className="px-2 pb-1 pt-0.5 rounded-md"
+            value={tab.value}
+            key={index}
+          >
+            {t(tab.name)}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+      <TabsContent value="profile">
+        <ProfileForm />
+      </TabsContent>
+      <TabsContent value="account">
+        <AccountForm />
+      </TabsContent>
+      <TabsContent value="appearance">
+        <AppearanceForm />
+      </TabsContent>
+    </Tabs>
+  );
+}

apps/next/src/components/Layout/Dashboard/DashboardHeader/Navigation.tsx

@@ -44,7 +44,7 @@ Navigation.Item = ({ variant }: { variant: string }) => {
           passHref
           key={index}
           className={cn(
-            "flex items-center w-full transition-colors text-gray-600 text-sm hover:text-accent-foreground group relative",
+            "flex items-center w-full transition-colors text-gray-600 dark:text-white dark:hover:text-opacity-60 text-sm hover:text-accent-foreground group relative",
             variant === "borgerMenu" &&
               "p-3  rounded-[6px] hover:bg-[#F8FAFC] dark:hover:bg-[#101929] mb-1",
             classes_hover,

apps/next/src/components/Layout/Dashboard/DashboardHeader/index.tsx

@@ -26,7 +26,7 @@ export default function HomeHeader({ className }: { className?: string }) {
   };
 
   return (
-    <div className="border-b border-[#E2E8F0] fixed w-full z-50">
+    <div className="border-b border-[#E2E8F0] dark:border-gray-800 fixed w-full z-50">
       <div
         className={cn(
           "w-full max-w-[90rem] bg-LightBackground dark:bg-DarkBackground m-auto",

apps/next/src/components/Layout/Dashboard/Sidebar/navigations.constants.tsx

@@ -94,35 +94,6 @@ const useSidebarNavigations = (): SidebarNavItem[] => {
       title: t("navbar.settings"),
       href: "/dashboard/settings",
       icon: <Settings size={16} />,
-      child: {
-        trigger: (
-          <Button
-            onClick={handleSettings}
-            variant="outline"
-            size="icon"
-            className="w-fit h-fit p-1"
-          >
-            {showSettings ? <ChevronDown size={9} /> : <ChevronUp size={"9"} />}
-          </Button>
-        ),
-        loading: false,
-        navs: showSettings
-          ? [
-              {
-                href: "/dashboard/settings/profile",
-                name: t("breadcrumbs.profile"),
-              },
-              {
-                href: "/dashboard/settings/account",
-                name: t("breadcrumbs.account"),
-              },
-              {
-                href: "/dashboard/settings/apparance",
-                name: t("breadcrumbs.apparance"),
-              },
-            ]
-          : [],
-      },
     },
   ];
 };

apps/next/src/pages/dashboard/settings/index.tsx

@@ -1,16 +1,29 @@
-import { Fragment } from "react";
+import SettingsContainer from "@/components/Dashboard/Settings";
+import ProfileForm from "@/components/Dashboard/Settings/ProfileForm";
+import DashboardLayout from "@/components/Layout/Dashboard";
+import { DashboardShell } from "@/components/Layout/Dashboard/Shell";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 
-export function getServerSideProps() {
+export async function getStaticProps({ locale }: { locale: string }) {
   return {
-    redirect: {
-      permanent: false,
-      destination: "/dashboard/settings/profile",
+    props: {
+      ...(await serverSideTranslations(locale, ["common", "zod"])),
     },
   };
 }
 
-const Settings = () => {
-  return <Fragment />;
+const SettingsProfile = () => {
+  return <ProfileForm />;
 };
 
-export default Settings;
+SettingsProfile.Layout = () => {
+  return (
+    <DashboardLayout>
+      <DashboardShell>
+        <SettingsContainer />
+      </DashboardShell>
+    </DashboardLayout>
+  );
+};
+
+export default SettingsProfile.Layout;