Home Bar + Dark & Light Mode Toggle + Skelton on User

app/dashboard/page.jsx

@@ -4,6 +4,8 @@ import { SidebarLayout, SidebarTrigger } from '@/components/ui/sidebar';
 import RecommendedClips from '@/components/ui/dashboard/RecommendedClips';
 import RevisitClips from '@/components/ui/dashboard/RevisitClips';
 import ImportVideos from '@/components/ui/dashboard/ImportVideos';
+import HelpCenter from '@/components/ui/dashboard/HelpCenter';
+import { ThemeProvider } from '@/components/ui/base/theme-provider';
 
 const clips = [
   {
@@ -26,18 +28,21 @@ const clips = [
 export default async function Page() {
   const { cookies } = await import('next/headers');
   return (
-    <SidebarLayout defaultOpen={cookies().get('sidebar:state')?.value === 'true'}>
-      <AppSidebar />
-      <main className="flex flex-1 flex-col p-0 transition-all duration-150 ease-in-out w-full">
-        <div className="h-full rounded-md relative">
-          <ImportVideos />
-          <RecommendedClips />
-          <RevisitClips clips={clips} />
-          {/* <div className="p-4">
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+      <SidebarLayout defaultOpen={cookies().get('sidebar:state')?.value === 'true'}>
+        <AppSidebar />
+        <main className="flex flex-1 flex-col p-0 transition-all duration-150 ease-in-out w-full">
+          <div className="h-full rounded-md relative">
+            <HelpCenter />
+            <ImportVideos />
+            <RecommendedClips />
+            <RevisitClips clips={clips} />
+            {/* <div className="p-4">
             <div className="flex items-center justify-center gap-2 aspect-video border-2 border-dashed border-accent rounded-2xl bg-neutral-200/50 border-neutral-300 w-full"></div>
           </div> */}
-        </div>
-      </main>
-    </SidebarLayout>
+          </div>
+        </main>
+      </SidebarLayout>
+    </ThemeProvider>
   );
 }

components/sidebar/app-sidebar.jsx

@@ -36,6 +36,7 @@ const data = {
     name: 'Loading...',
     email: 'Loading...',
     picture: '',
+    isLoaded: false,
   },
   navMain: [
     {
@@ -88,9 +89,10 @@ export function AppSidebar() {
   const [isFullyOpen, setIsFullyOpen] = useState(open);
 
   useEffect(() => {
-    getUser().then((user) => {
+    getUser().then(user => {
       console.log(user);
       data.user = user;
+      data.user.isLoaded = true;
       setIsLoaded(true);
     });
   }, []);
@@ -420,7 +422,7 @@ export function AppSidebar() {
           </AnimatePresence>
         </SidebarContent>
         <SidebarFooter>
-          <NavUser user={data.user} isCollapsed={!open} />
+          <NavUser user={data.user} isCollapsed={!open} isLoading={!isLoaded} />
         </SidebarFooter>
       </MotionConfig>
     </Sidebar>

components/sidebar/nav-user.jsx

@@ -1,17 +1,48 @@
-import { BadgeCheck, Bell, ChevronsUpDown, CreditCard, LogOut } from 'lucide-react';
+import {
+  Bell,
+  ChevronsUpDown,
+  CreditCard,
+  Laptop,
+  LogOut,
+  Moon,
+  PanelsTopLeft,
+  Sun,
+} from 'lucide-react';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/base/avatar';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuLabel,
+  DropdownMenuPortal,
   DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from '@/components/ui/base/dropdown-menu';
 import { signOut } from '@/utils/authClient';
+import { useTheme } from 'next-themes';
+import { Skeleton } from '@/components/ui/base/skeleton';
+
+export function NavUser({ user, isCollapsed, isLoading }) {
+  const { setTheme } = useTheme();
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center gap-2 px-2 py-1.5">
+        <Skeleton className="h-7 w-7 rounded-md" />
+        {!isCollapsed && (
+          <div className="flex-1">
+            <Skeleton className="h-3.5 w-24 mb-1" />
+            <Skeleton className="h-3 w-32" />
+          </div>
+        )}
+      </div>
+    );
+  }
 
-export function NavUser({ user, isCollapsed }) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger className="w-full rounded-md outline-none ring-ring hover:bg-accent focus-visible:ring-2 data-[state=open]:bg-accent">
@@ -54,10 +85,29 @@ export function NavUser({ user, isCollapsed }) {
         </DropdownMenuLabel>
         <DropdownMenuSeparator />
         <DropdownMenuGroup>
-          <DropdownMenuItem className="gap-2">
-            <BadgeCheck className="h-4 w-4 text-muted-foreground" />
-            Account
-          </DropdownMenuItem>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger className="gap-2">
+              <PanelsTopLeft className="h-4 w-4 text-muted-foreground" />
+              Themes
+            </DropdownMenuSubTrigger>
+            <DropdownMenuPortal>
+              <DropdownMenuSubContent>
+                <DropdownMenuItem onClick={() => setTheme('system')} className="gap-2">
+                  <Laptop className="h-4 w-4 text-muted-foreground" />
+                  System
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setTheme('light')} className="gap-2">
+                  <Sun className="h-4 w-4 text-muted-foreground" />
+                  Light
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setTheme('dark')} className="gap-2">
+                  <Moon className="h-4 w-4 text-muted-foreground" />
+                  Dark
+                </DropdownMenuItem>
+              </DropdownMenuSubContent>
+            </DropdownMenuPortal>
+          </DropdownMenuSub>
+
           <DropdownMenuItem className="gap-2">
             <CreditCard className="h-4 w-4 text-muted-foreground" />
             Billing
@@ -68,10 +118,7 @@ export function NavUser({ user, isCollapsed }) {
           </DropdownMenuItem>
         </DropdownMenuGroup>
         <DropdownMenuSeparator />
-        <DropdownMenuItem 
-          className="gap-2 text-red-600 hover:text-red-600"
-          onClick={signOut}
-        >
+        <DropdownMenuItem className="gap-2 text-red-600 hover:text-red-600" onClick={signOut}>
           <LogOut className="h-4 w-4 text-muted-foreground text-red-600" />
           Log out
         </DropdownMenuItem>

components/ui/base/skeleton.jsx

@@ -0,0 +1,10 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}) {
+  return (<div className={cn("animate-pulse rounded-md bg-muted", className)} {...props} />);
+}
+
+export { Skeleton }

components/ui/base/tabs.jsx

@@ -0,0 +1,43 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props} />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props} />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props} />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

components/ui/dashboard/HelpCenter.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import React from 'react';
+import { Button } from '@/components/ui/base/button';
+import { BookCheck, BookText, Video, X, XCircle } from 'lucide-react';
+
+const guides = [
+  {
+    title: 'Getting Started',
+    description: 'Learn how to get started with our platform',
+    link: '/getting-started',
+    icon: BookCheck,
+  },
+  {
+    title: 'Watch a Video',
+    description: 'Watch a video to learn how to use our platform',
+    link: '/watch-video',
+    icon: Video,
+  },
+  {
+    title: 'FAQs',
+    description: 'Frequently asked questions',
+    link: '/faqs',
+    icon: BookText,
+  },
+];
+
+export default function HelpCenter() {
+  return (
+    <div className="w-full">
+      <div className="p-4">
+        <div className="flex flex-col border border-neutral-200 bg-[#317EC5] p-4 dark:border-neutral-700 rounded-xl overflow-hidden bg-cover bg-left-top h-[200px] bg-[url('/images/dashboard/clouds.png')] dark:bg-blend-soft-light dark:bg-neutral-900">
+          <div className="flex justify-between w-full h-fit">
+            <h1 className="text-2xl font-semibold text-white tracking-tight">Home</h1>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package.json

@@ -16,6 +16,7 @@
     "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",