Topbar 3

import { useState } from "react";

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

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";

export function Topbar3() {
    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-6 px-4 sm:px-6 lg:px-8">
                    <div className="flex items-center gap-6">
                        <div className="flex items-center gap-3">
                            <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
                                <SheetTrigger
                                    render={
                                        <Button variant="ghost" size="icon" className="lg: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">
                                            Platform
                                        </a>
                                        <a
                                            href="#"
                                            className="text-muted-foreground hover:bg-muted hover:text-foreground rounded-md px-3 py-2 text-sm font-medium">
                                            Solutions
                                        </a>
                                        <a
                                            href="#"
                                            className="text-muted-foreground hover:bg-muted hover:text-foreground rounded-md px-3 py-2 text-sm font-medium">
                                            Resources
                                        </a>
                                        <a
                                            href="#"
                                            className="text-muted-foreground hover:bg-muted hover:text-foreground rounded-md px-3 py-2 text-sm font-medium">
                                            Enterprise
                                        </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="bg-border hidden h-5 w-px lg:block" />

                        <div className="hidden items-center gap-6 lg:flex">
                            <nav className="flex items-center gap-5">
                                <a href="#" className="text-foreground text-sm font-medium">
                                    Platform
                                </a>
                                <a
                                    href="#"
                                    className="text-muted-foreground hover:text-foreground text-sm font-medium transition-colors">
                                    Solutions
                                </a>
                                <a
                                    href="#"
                                    className="text-muted-foreground hover:text-foreground text-sm font-medium transition-colors">
                                    Resources
                                </a>
                            </nav>

                            <div className="relative w-64">
                                <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" />
                            </div>

                            <div className="flex items-center gap-2">
                                <Button variant="ghost" size="icon">
                                    <SlidersHorizontal />
                                </Button>
                                <Button variant="ghost" size="icon">
                                    <Bell />
                                </Button>
                            </div>
                        </div>
                    </div>

                    <div className="flex items-center gap-3">
                        <a
                            href="#"
                            className="text-muted-foreground hover:text-foreground hidden text-sm font-medium sm:block">
                            Sign In
                        </a>
                        <Button>
                            <span>Get Started</span>
                            <ArrowRight />
                        </Button>
                    </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>
    );
}