Settings Page

app/dashboard/DashboardPage.tsx

@@ -13,9 +13,9 @@ export default function DashboardPage({ username, name }: DashboardPageProps) {
             <Sidebar 
                 username={username} 
                 fullName={name} 
-                breadcrumbPath={['Home', 'Dashboard']}
+                breadcrumbPath={['/', 'Dashboard']}
             >
-                <main className="pl-4">
+                <main>
                     <h1>Dashboard</h1>
                 </main>
             </Sidebar>

app/dashboard/settings/SettingsPage.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import Sidebar from "@/components/Sidebar";
+
+interface DashboardPageProps {
+    username: string;
+    name: string;
+}
+
+export default function DashboardPage({ username, name }: DashboardPageProps) {    
+    return (
+        <div>
+            <Sidebar 
+                username={username} 
+                fullName={name} 
+                breadcrumbPath={['/', 'Dashboard', 'Settings']}
+            >
+                <main>
+                    <h1 className="text-2xl font-bold">Settings</h1>
+                    <p className="text-sm opacity-70">Manage your instance settings</p>
+
+                    <div className="tabs tabs-border pt-8">
+                        <input type="radio" name="user_settings" className="tab text-primary" aria-label="User Settings" defaultChecked/>
+                        <div className="tab-content bg-base-100 p-10">User Settings</div>
+                    </div>
+
+                </main>
+            </Sidebar>
+        </div>
+    );
+}

app/dashboard/settings/page.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import SettingsPage from "./SettingsPage";
+import Loading from "@/components/Loading";
+
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import axios from "axios";
+import Cookies from "js-cookie";
+
+export default function Dashboard() {
+  const router = useRouter();
+  const [loading, setLoading] = useState(true);
+  const [username, setUsername] = useState("");
+  const [name, setName] = useState("");
+
+  useEffect(() => {
+    const init = async () => {
+      const token = Cookies.get("token");
+      if (!token) {
+        router.push("/");
+      }
+      const response = await axios.post("/api/user/validate", { token });
+      if (response.data.message !== "Valid") {
+        Cookies.remove("token");
+        router.push("/");
+      } else {
+        setUsername(response.data.username);
+        setName(response.data.name);
+        setLoading(false);
+      }
+    };
+    init();
+  }, []);
+
+  if (loading) {
+    return <Loading />;
+  } else {
+    return <SettingsPage username={username} name={name} />;
+  }
+}

components/Breadcrumbs.tsx

@@ -6,7 +6,7 @@ interface BreadcrumbsProps {
 export default function Breadcrumbs({ breadcrumbPath = ['Home'] }: BreadcrumbsProps) {
     return(
         <div className="w-full">
-            <div className="breadcrumbs text-sm">
+            <div className="breadcrumbs text-sm bg-base-200 pb-6">
                 <ul className="pl-4 pt-4">
                     {breadcrumbPath.map((item, index) => (
                         <li key={index}>
@@ -18,7 +18,6 @@ export default function Breadcrumbs({ breadcrumbPath = ['Home'] }: BreadcrumbsPr
                         </li>
                     ))}
                 </ul>
-                <div className="divider"></div>
             </div>
         </div>
     )

components/Sidebar.tsx

@@ -180,7 +180,9 @@ export default function Sidebar({ children, username, fullName, breadcrumbPath }
       {/* Main content */}
       <main className="flex-1 overflow-auto">
         <Breadcrumbs breadcrumbPath={breadcrumbPath} />
-        {children}
+        <div className="p-8 ">
+            {children}
+        </div>
       </main>
     </div>
   )