118 lines
5.4 KiB
TypeScript
118 lines
5.4 KiB
TypeScript
import { useState } from "react";
|
|
import { Link } from "react-router-dom";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
|
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
|
|
import {
|
|
DropdownMenu, DropdownMenuContent, DropdownMenuItem,
|
|
DropdownMenuSeparator, DropdownMenuTrigger
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import {
|
|
Menu, Search, Bell, User, Settings, LogOut, Clock
|
|
} from "lucide-react";
|
|
import { ThemeToggle } from "@/components/ThemeToggle";
|
|
import { SidebarContent } from "@/components/Sidebar";
|
|
import { useAuth } from "@/hooks/use-tygarun";
|
|
|
|
const notifications = [
|
|
{ title: "New task assigned", desc: "Alex assigned you to API integration", time: "5m ago", unread: true },
|
|
{ title: "Comment on task", desc: "Maria commented on Homepage redesign", time: "22m ago", unread: true },
|
|
{ title: "Project completed", desc: "API Migration marked as complete", time: "1h ago", unread: false },
|
|
];
|
|
|
|
export default function Header() {
|
|
const [mobileOpen, setMobileOpen] = useState(false);
|
|
const { signout } = useAuth();
|
|
|
|
return (
|
|
<header className="sticky top-0 z-40 bg-white/80 backdrop-blur-lg border-b border-slate-100">
|
|
<div className="flex items-center justify-between h-16 px-6">
|
|
{/* Mobile menu */}
|
|
<Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
|
|
<SheetTrigger asChild>
|
|
<Button variant="ghost" size="sm" className="lg:hidden h-9 w-9 p-0">
|
|
<Menu className="h-5 w-5 text-slate-600" />
|
|
</Button>
|
|
</SheetTrigger>
|
|
<SheetContent side="left" className="p-0 w-64 border-0">
|
|
<SidebarContent activePath="/" />
|
|
</SheetContent>
|
|
</Sheet>
|
|
|
|
{/* Search */}
|
|
<div className="hidden sm:flex items-center flex-1 max-w-md">
|
|
<div className="relative w-full">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
|
|
<Input placeholder="Search tasks, projects..." className="pl-10 bg-slate-50 border-slate-200 focus:bg-white h-9" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
{/* Notifications */}
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<Button variant="ghost" size="sm" className="relative h-9 w-9 p-0">
|
|
<Bell className="h-5 w-5 text-slate-600" />
|
|
<span className="absolute top-1 right-1 h-2 w-2 rounded-full bg-violet-600" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-80 p-0" align="end">
|
|
<div className="p-4 border-b border-slate-100">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="font-semibold text-sm">Notifications</h3>
|
|
<Badge variant="secondary" className="text-xs">2 new</Badge>
|
|
</div>
|
|
</div>
|
|
<div className="max-h-72 overflow-y-auto">
|
|
{notifications.map((n, i) => (
|
|
<div key={i} className={`p-4 border-b border-slate-50 hover:bg-slate-50 transition-colors ${n.unread ? "bg-violet-50/30" : ""}`}>
|
|
<div className="flex items-start gap-2">
|
|
{n.unread && <div className="h-2 w-2 rounded-full bg-violet-600 mt-1.5 shrink-0" />}
|
|
<div>
|
|
<p className="text-sm font-medium text-slate-900">{n.title}</p>
|
|
<p className="text-xs text-slate-500 mt-0.5">{n.desc}</p>
|
|
<p className="text-xs text-slate-400 mt-1 flex items-center gap-1">
|
|
<Clock className="h-3 w-3" />{n.time}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="p-3 text-center">
|
|
<Button variant="ghost" size="sm" className="text-violet-600 hover:text-violet-700 text-xs">View All Notifications</Button>
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
|
|
<ThemeToggle />
|
|
|
|
<Separator orientation="vertical" className="h-6 mx-1" />
|
|
|
|
{/* User Menu */}
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" className="flex items-center gap-2 h-9 px-2">
|
|
<Avatar className="h-7 w-7">
|
|
<AvatarFallback className="text-xs bg-violet-100 text-violet-700">AK</AvatarFallback>
|
|
</Avatar>
|
|
<span className="hidden sm:block text-sm font-medium text-slate-700">Alex Kim</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-48">
|
|
<DropdownMenuItem><User className="mr-2 h-4 w-4" /> Profile</DropdownMenuItem>
|
|
<DropdownMenuItem><Settings className="mr-2 h-4 w-4" /> Settings</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={() => signout()} className="text-red-600"><LogOut className="mr-2 h-4 w-4" /> Log Out</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|