"use client"; import { signOut } from "@/app/login/actions"; import { Button } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { sidebarData } from "@/config/sidebar"; import { cn } from "@/lib/utils"; import { AnimatePresence, motion } from "framer-motion"; import { ChevronDown, LogOut, Menu, Settings2, Clock } from "lucide-react"; import Image from "next/image"; import Link from "next/link"; import { usePathname } from "next/navigation"; import { useState, useEffect } from "react"; type DashboardShellProps = { children: React.ReactNode; user: { email: string; displayName: string; shortName: string; avatarUrl: string | null; }; }; export function DashboardShell({ children, user }: DashboardShellProps) { const pathname = usePathname(); const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false); const [isClockFullScreen, setIsClockFullScreen] = useState(false); const closeMobileSidebar = () => setIsMobileSidebarOpen(false); return (
{/* Full Screen Clock Overlay */} {isClockFullScreen && ( setIsClockFullScreen(false)} >
Click anywhere to close
)}
{/* Desktop Sidebar */}
setIsClockFullScreen(true)} />
{/* Mobile Sidebar */} {isMobileSidebarOpen ? (
{children}
); } function SidebarPanel({ pathname, user, desktop = false, onNavigate, onClockClick, }: { pathname: string; user: DashboardShellProps["user"]; desktop?: boolean; onNavigate?: () => void; onClockClick: () => void; }) { return ( ); } function ClockBadge({ onClick }: { onClick: () => void }) { const [time, setTime] = useState(""); useEffect(() => { const updateTime = () => { setTime(new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })); }; updateTime(); const interval = setInterval(updateTime, 1000); return () => clearInterval(interval); }, []); if (!time) { return
; } return ( ); } function FullScreenClock() { const [time, setTime] = useState(""); useEffect(() => { const updateTime = () => { setTime(new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit' })); }; updateTime(); const interval = setInterval(updateTime, 1000); return () => clearInterval(interval); }, []); return (
{time || "..."}
); } function Avatar({ user }: { user: DashboardShellProps["user"] }) { if (user.avatarUrl) { return (
{/* eslint-disable-next-line @next/next/no-img-element */} {user.displayName}
); } return (
{user.shortName}
); } function AmbientBackdrop() { return ( <>
); }