adding agent pages.

src/features/auth/auth.action.ts

@@ -1,6 +1,7 @@
 "use server"
-import {signIn, signOut} from "@/auth/auth";
+
 import {redirect} from "next/navigation";
+import {signIn, signOut} from "@/auth/auth";
 
 export const signOutAction = async () => {
     await signOut({redirectTo: '/', redirect: true})

src/features/layout/Header.tsx

@@ -1,10 +1,6 @@
-import Image from "next/image"
-import {Layout} from "@/components/layout";
-import Link from "next/link";
-import {Badge} from "@/components/ui/badge";
-import {currentUser} from "@/auth/current-user";
 import {notFound} from "next/navigation";
-import {buttonVariants} from "@/components/ui/button";
+
+import {currentUser} from "@/auth/current-user";
 import {LoggedInButton} from "@/components/wrappers/Dashboard/LoggedInButton/LoggedInButton";
 import {SidebarTrigger} from "@/components/ui/sidebar";
 import {ModeToggle} from "@/features/theme/ModeToggle";

src/features/layout/page.tsx

@@ -0,0 +1,38 @@
+import {PropsWithChildren} from 'react';
+
+export const Page = ({children}: PropsWithChildren<{}>) => {
+    return (
+        <div className="flex flex-1 flex-col gap-4 px-10 py-6">{children}</div>
+    );
+};
+
+export const PageHeader = ({children}: PropsWithChildren<{}>) => {
+    return (
+        <div className="flex justify-between">{children}</div>
+    );
+};
+
+export const PageTitle = ({children}: PropsWithChildren<{}>) => {
+    return (
+        <h1 className="text-3xl font-bold mb-6">{children}</h1>
+    );
+};
+
+export const PageDescription = ({children}: PropsWithChildren<{}>) => {
+    return (
+        <h2 className="text-s mb-6 text-gray-700">{children}</h2>
+    );
+};
+
+export const PageActions = ({children}: PropsWithChildren<{}>) => {
+    return (
+        <h1 className="flex gap-4">{children}</h1>
+    );
+};
+
+
+export const PageContent = ({children}: PropsWithChildren<{}>) => {
+    return (
+        <div className="">{children}</div>
+    );
+};

src/features/theme/ModeToggle.tsx

@@ -1,26 +1,21 @@
 "use client"
 
 import * as React from "react"
-import { Moon, Sun } from "lucide-react"
-import { useTheme } from "next-themes"
+import {Moon, Sun} from "lucide-react"
+import {useTheme} from "next-themes"
 
-import { Button } from "@/components/ui/button"
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+import {Button} from "@/components/ui/button"
+import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from "@/components/ui/dropdown-menu"
 
 export function ModeToggle() {
-    const { setTheme } = useTheme()
+    const {setTheme} = useTheme()
 
     return (
         <DropdownMenu>
             <DropdownMenuTrigger asChild>
                 <Button variant="ghost" size="sm">
-                    <Sun className="size-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-                    <Moon className="absolute size-4  rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+                    <Sun className="size-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"/>
+                    <Moon className="absolute size-4  rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"/>
                     <span className="sr-only">Toggle theme</span>
                 </Button>
             </DropdownMenuTrigger>

src/features/theme/theme-provider.tsx

@@ -4,6 +4,6 @@ import * as React from "react"
 import { ThemeProvider as NextThemesProvider } from "next-themes"
 import { type ThemeProviderProps } from "next-themes/dist/types"
 
-export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+export default function ThemeProvider({ children, ...props }: ThemeProviderProps) {
     return <NextThemesProvider {...props}>{children}</NextThemesProvider>
 }