Topbar 5

import { useState } from "react";

import { Bell, Calendar, Command, Mail, Menu, Search } from "lucide-react";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";

export function Topbar5() {
    const [mobileOpen, setMobileOpen] = useState(false);

    return (
        <div>
            <header className="w-full border-b">
                <div className="mx-auto flex h-16 max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
                    <div className="flex items-center gap-4 sm:gap-6">
                        <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
                            <SheetTrigger
                                render={
                                    <Button variant="ghost" size="icon" className="md:hidden">
                                        <Menu />
                                    </Button>
                                }
                            />
                            <SheetContent side="left" className="w-72">
                                <SheetHeader className="border-b pb-4">
                                    <SheetTitle className="flex items-center gap-2.5 text-start font-medium">
                                        <div className="bg-primary text-primary-foreground flex size-9 shrink-0 items-center justify-center rounded-md text-sm font-medium">
                                            P{" "}
                                        </div>
                                        <span>PaceUI</span>
                                    </SheetTitle>
                                </SheetHeader>
                                <nav className="flex flex-col gap-1 px-4 py-2">
                                    <a href="#" className="hover:bg-muted rounded-md px-3 py-2 text-sm font-medium">
                                        Dashboard
                                    </a>
                                    <a
                                        href="#"
                                        className="text-muted-foreground hover:bg-muted hover:text-foreground rounded-md px-3 py-2 text-sm font-medium">
                                        Inbox
                                    </a>
                                    <a
                                        href="#"
                                        className="text-muted-foreground hover:bg-muted hover:text-foreground rounded-md px-3 py-2 text-sm font-medium">
                                        Calendar
                                    </a>
                                    <a
                                        href="#"
                                        className="text-muted-foreground hover:bg-muted hover:text-foreground rounded-md px-3 py-2 text-sm font-medium">
                                        Reports
                                    </a>
                                </nav>
                            </SheetContent>
                        </Sheet>

                        <a href="#" className="flex items-center gap-2.5">
                            <div className="bg-primary text-primary-foreground flex size-9 shrink-0 items-center justify-center rounded-md text-sm font-medium">
                                P
                            </div>
                            <span className="hidden font-medium tracking-tight sm:inline">PaceUI</span>
                        </a>

                        <div className="bg-muted/50 hover:bg-muted text-muted-foreground flex items-center gap-2 rounded-md border px-3 py-2 text-sm transition-colors max-sm:hidden">
                            <Search className="size-4" />
                            <span className="hidden sm:inline">Type anywhere to search...</span>
                            <span className="sm:hidden">Search...</span>
                            <span className="bg-background text-muted-foreground ms-2 hidden items-center gap-1 rounded border px-1.5 py-0.5 text-xs font-medium sm:flex">
                                <Command className="size-3" /> K
                            </span>
                        </div>
                    </div>

                    <div className="flex items-center gap-0">
                        <Button variant="ghost" size="icon">
                            <Calendar />
                            <span className="sr-only">Calendar</span>
                        </Button>
                        <Button variant="ghost" size="icon" className="relative">
                            <Mail />
                            <Badge
                                variant="secondary"
                                className="bg-primary text-primary-foreground absolute -end-1 -top-1 flex size-4 items-center justify-center rounded-full p-0 text-[9px]">
                                3
                            </Badge>
                            <span className="sr-only">Messages</span>
                        </Button>
                        <Button variant="ghost" size="icon" className="relative">
                            <Bell />
                            <span className="absolute end-2 top-2 size-2 rounded-full bg-emerald-500" />
                            <span className="sr-only">Notifications</span>
                        </Button>

                        <div className="bg-border mx-1 me-3 h-5 w-px" />

                        <div className="relative">
                            <Avatar className="size-9">
                                <AvatarImage
                                    src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100&auto=format&fit=crop&q=80"
                                    alt="Avatar"
                                />
                                <AvatarFallback>AK</AvatarFallback>
                            </Avatar>
                            <span className="border-background absolute end-0 bottom-0 size-2.5 rounded-full border-2 bg-emerald-500" />
                        </div>
                    </div>
                </div>
            </header>
            <div className="bg-muted/60 flex h-36 items-center justify-center">
                <p className="text-foreground/25 font-medium">Content Here</p>
            </div>
        </div>
    );
}