Topbar 1

import { useState } from "react";

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

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";

const navLinks = [
    { name: "Home", href: "#" },
    { name: "Features", href: "#" },
    { name: "Pricing", href: "#" },
    { name: "Documentation", href: "#" },
];

export function Topbar1() {
    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 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 menu</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">
                                    {navLinks.map((link) => (
                                        <a
                                            key={link.name}
                                            href={link.href}
                                            className="text-muted-foreground hover:text-foreground hover:bg-muted rounded-md px-3 py-2 text-sm font-medium transition-colors"
                                            onClick={() => setMobileOpen(false)}>
                                            {link.name}
                                        </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>

                    <nav className="hidden items-center gap-8 md:flex">
                        {navLinks.map((link) => (
                            <a
                                key={link.name}
                                href={link.href}
                                className="text-muted-foreground hover:text-foreground text-sm font-medium transition-colors">
                                {link.name}
                            </a>
                        ))}
                    </nav>

                    <div className="flex items-center gap-2">
                        <Button variant="ghost" size="icon">
                            <Search />
                            <span className="sr-only">Search</span>
                        </Button>
                        <Button variant="ghost" size="icon">
                            <Bell />
                            <span className="sr-only">Notifications</span>
                        </Button>
                        <Button variant="ghost" size="icon">
                            <Sun />
                            <span className="sr-only">Toggle theme</span>
                        </Button>

                        <DropdownMenu>
                            <DropdownMenuTrigger
                                render={
                                    <Button variant="ghost" size="icon" className="relative rounded-full">
                                        <Avatar className="size-9">
                                            <AvatarImage
                                                src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&auto=format&fit=crop&q=80"
                                                alt="Avatar"
                                            />
                                            <AvatarFallback>JD</AvatarFallback>
                                        </Avatar>
                                    </Button>
                                }
                            />
                            <DropdownMenuContent align="end" className="w-56">
                                <DropdownMenuLabel className="font-normal">
                                    <div className="flex flex-col space-y-1">
                                        <p className="text-sm leading-none font-medium">Jane Doe</p>
                                        <p className="text-muted-foreground text-xs leading-none">jane@acme.com</p>
                                    </div>
                                </DropdownMenuLabel>
                                <DropdownMenuSeparator />
                                <DropdownMenuItem>
                                    <Settings className="me-2 size-4" /> Profile Settings
                                </DropdownMenuItem>
                                <DropdownMenuItem>Billing</DropdownMenuItem>
                                <DropdownMenuSeparator />
                                <DropdownMenuItem variant="destructive">Log out</DropdownMenuItem>
                            </DropdownMenuContent>
                        </DropdownMenu>
                    </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>
    );
}