Seed: dashboard template (24 files)
This commit is contained in:
@@ -0,0 +1,134 @@
|
||||
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, ShoppingCart, UserPlus, AlertCircle
|
||||
} from "lucide-react";
|
||||
import { ThemeToggle } from "@/components/ThemeToggle";
|
||||
import { SidebarContent } from "@/components/Sidebar";
|
||||
|
||||
export default function Header() {
|
||||
const [mobileOpen, setMobileOpen] = useState(false);
|
||||
|
||||
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="w-64 p-0">
|
||||
<SidebarContent activePath="/" />
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
|
||||
{/* Search */}
|
||||
<div className="hidden sm:flex relative flex-1 max-w-md">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
|
||||
<Input
|
||||
placeholder="Search anything..."
|
||||
className="pl-10 bg-slate-50 border-slate-200 focus:bg-white"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Right side */}
|
||||
<div className="flex items-center gap-3 ml-auto">
|
||||
<ThemeToggle />
|
||||
<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-0.5 -right-0.5 h-4 w-4 rounded-full bg-red-500 text-[10px] font-bold text-white flex items-center justify-center">
|
||||
3
|
||||
</span>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent align="end" className="w-80 p-0">
|
||||
<div className="p-3 border-b border-slate-100">
|
||||
<p className="text-sm font-semibold text-slate-900">Notifications</p>
|
||||
</div>
|
||||
<div className="divide-y divide-slate-100">
|
||||
<div className="flex items-start gap-3 p-3 hover:bg-muted/50 transition-colors">
|
||||
<div className="h-8 w-8 rounded-full bg-sky-100 flex items-center justify-center shrink-0 mt-0.5">
|
||||
<ShoppingCart className="h-4 w-4 text-sky-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-900">New order received</p>
|
||||
<p className="text-xs text-slate-500">Order #ORD-7291 for $234.50</p>
|
||||
<p className="text-xs text-slate-400 mt-1">2 minutes ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3 p-3 hover:bg-muted/50 transition-colors">
|
||||
<div className="h-8 w-8 rounded-full bg-emerald-100 flex items-center justify-center shrink-0 mt-0.5">
|
||||
<UserPlus className="h-4 w-4 text-emerald-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-900">New user signed up</p>
|
||||
<p className="text-xs text-slate-500">James Cooper joined as Editor</p>
|
||||
<p className="text-xs text-slate-400 mt-1">15 minutes ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3 p-3 hover:bg-muted/50 transition-colors">
|
||||
<div className="h-8 w-8 rounded-full bg-amber-100 flex items-center justify-center shrink-0 mt-0.5">
|
||||
<AlertCircle className="h-4 w-4 text-amber-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-900">Usage limit warning</p>
|
||||
<p className="text-xs text-slate-500">API requests at 84% of limit</p>
|
||||
<p className="text-xs text-slate-400 mt-1">1 hour ago</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="p-2">
|
||||
<Button variant="ghost" size="sm" className="w-full text-xs text-sky-600 hover:text-sky-700">
|
||||
View all notifications
|
||||
</Button>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button className="flex items-center gap-2 hover:opacity-80 transition-opacity">
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarFallback className="bg-sky-100 text-sky-700 text-xs font-semibold">SM</AvatarFallback>
|
||||
</Avatar>
|
||||
<span className="hidden md:block text-sm font-medium text-slate-700">Sarah M.</span>
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-48">
|
||||
<DropdownMenuItem asChild>
|
||||
<Link to="/profile" className="flex items-center gap-2 cursor-pointer">
|
||||
<User className="h-4 w-4" /> Profile
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link to="/settings" className="flex items-center gap-2 cursor-pointer">
|
||||
<Settings className="h-4 w-4" /> Settings
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem className="text-red-600 cursor-pointer">
|
||||
<LogOut className="h-4 w-4 mr-2" /> Log Out
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user