Spaces:
Runtime error
Runtime error
| import { Outlet, Link, useLocation } from 'react-router-dom'; | |
| import { useAuthStore } from '../store/auth'; | |
| import { Film, Briefcase, Youtube, LogOut, Calendar } from 'lucide-react'; | |
| import { cn } from '../lib/utils'; | |
| export function Layout() { | |
| const { logout } = useAuthStore(); | |
| const location = useLocation(); | |
| const navItems = [ | |
| { name: 'Jobs', path: '/', icon: Film }, | |
| { name: 'Scheduling', path: '/scheduling', icon: Calendar }, | |
| { name: 'Brands', path: '/brands', icon: Briefcase }, | |
| { name: 'Channels', path: '/channels', icon: Youtube }, | |
| ]; | |
| return ( | |
| <div className="flex h-screen bg-background text-foreground"> | |
| <aside className="w-64 border-r border-border bg-card flex flex-col"> | |
| <div className="p-6"> | |
| <h1 className="text-xl font-bold tracking-tight text-foreground"> | |
| ATLAS | |
| </h1> | |
| <p className="text-xs text-muted-foreground mt-1">Autonomous Shorts</p> | |
| </div> | |
| <nav className="flex-1 px-4 space-y-1 mt-4"> | |
| {navItems.map((item) => { | |
| const isActive = location.pathname === item.path; | |
| const Icon = item.icon; | |
| return ( | |
| <Link | |
| key={item.path} | |
| to={item.path} | |
| className={cn( | |
| "flex items-center gap-3 px-3 py-2.5 rounded-md transition-colors text-sm font-medium", | |
| isActive | |
| ? "bg-accent text-accent-foreground" | |
| : "text-muted-foreground hover:bg-accent/50 hover:text-foreground" | |
| )} | |
| > | |
| <Icon size={16} /> | |
| {item.name} | |
| </Link> | |
| ); | |
| })} | |
| </nav> | |
| <div className="p-4 border-t border-border"> | |
| <button | |
| onClick={logout} | |
| className="flex items-center gap-3 px-3 py-2.5 w-full text-left text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-accent/50 rounded-md transition-colors" | |
| > | |
| <LogOut size={16} /> | |
| Sign Out | |
| </button> | |
| </div> | |
| </aside> | |
| <main className="flex-1 overflow-auto bg-background"> | |
| <div className="p-8 max-w-6xl mx-auto h-full"> | |
| <Outlet /> | |
| </div> | |
| </main> | |
| </div> | |
| ); | |
| } | |