Topbar 2

import { useState } from "react";

import { Bell, HelpCircle, Menu, Search } from "lucide-react";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Kbd } from "@/components/ui/kbd";
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";

export function Topbar2() {
    const [mobileOpen, setMobileOpen] = useState(false);
    const [mobileSearchOpen, setMobileSearchOpen] = 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">
                        <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
                            <SheetTrigger
                                render={
                                    <Button variant="ghost" size="icon" className="md:hidden">
                                        <Menu />
                                        <span className="sr-only">Toggle navigation</span>
                                    </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">
                                        Documentation
                                    </a>
                                    <a
                                        href="#"
                                        className="text-muted-foreground hover:bg-muted hover:text-foreground rounded-md px-3 py-2 text-sm font-medium">
                                        Support
                                    </a>
                                    <a
                                        href="#"
                                        className="text-muted-foreground hover:bg-muted hover:text-foreground rounded-md px-3 py-2 text-sm font-medium">
                                        API Reference
                                    </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>

                    <div className="hidden max-w-xs flex-1 items-center md:flex lg:max-w-md">
                        <div className="relative w-full">
                            <Search className="text-muted-foreground absolute inset-s-3 top-1/2 size-4 -translate-y-1/2" />
                            <Input
                                type="search"
                                placeholder="Search resources, docs, or commands..."
                                className="ps-9 pe-12 text-sm shadow-none"
                            />
                            <div className="absolute inset-e-2.5 top-1/2 -translate-y-1/2">
                                <Kbd>⌘K</Kbd>
                            </div>
                        </div>
                    </div>

                    <div className="flex items-center gap-2 sm:gap-3">
                        <Button
                            variant="ghost"
                            size="icon"
                            className="md:hidden"
                            onClick={() => setMobileSearchOpen(!mobileSearchOpen)}>
                            <Search />
                        </Button>

                        <nav className="hidden items-center gap-6 sm:flex">
                            <a
                                href="#"
                                className="text-muted-foreground hover:text-foreground text-sm font-medium transition-colors">
                                Docs
                            </a>
                            <a
                                href="#"
                                className="text-muted-foreground hover:text-foreground text-sm font-medium transition-colors">
                                Support
                            </a>
                        </nav>

                        <div className="bg-border hidden h-5 w-px sm:block" />

                        <div className="flex items-center gap-2">
                            <Button variant="ghost" size="icon">
                                <HelpCircle />
                                <span className="sr-only">Help</span>
                            </Button>
                            <Button variant="ghost" size="icon" className="relative">
                                <Bell />
                                <span className="bg-primary absolute end-2 top-2 size-2 rounded-full" />
                                <span className="sr-only">Notifications</span>
                            </Button>

                            <Avatar className="size-9 cursor-pointer">
                                <AvatarImage
                                    src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&auto=format&fit=crop&q=80"
                                    alt="Avatar"
                                />
                                <AvatarFallback>CN</AvatarFallback>
                            </Avatar>
                        </div>
                    </div>
                </div>

                {mobileSearchOpen && (
                    <div className="border-t p-3 md:hidden">
                        <div className="relative w-full">
                            <Search className="text-muted-foreground absolute start-3 top-1/2 size-4 -translate-y-1/2" />
                            <Input
                                type="search"
                                placeholder="Search..."
                                className="ps-9 text-sm shadow-none"
                                autoFocus
                            />
                        </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>
    );
}