Minimal Rounded Header

1"use client";
2
3import * as React from "react";
4import Link from "next/link";
5import { Moon, Sun, Menu, X } from "lucide-react";
6import { useTheme } from "@/components/theme-provider";
7import { cn } from "@/lib/utils";
8import { Button } from "@/components/ui/button";
9import { Separator } from "@/components/ui/separator";
10
11const navigationItems = [
12  { label: "Home", href: "#home" },
13  { label: "About", href: "#about" },
14  { label: "Services", href: "#services" },
15];
16
17export type MinimalRoundedHeaderProps = {
18  variant?: "desktop" | "compact";
19  className?: string;
20  homeHref?: string;
21  signInHref?: string;
22  getStartedHref?: string;
23  onMenuClick?: () => void;
24};
25
26export function MinimalRoundedHeader({
27  className,
28  homeHref = "/",
29  signInHref = "/login",
30  getStartedHref = "/signup",
31  onMenuClick,
32}: MinimalRoundedHeaderProps) {
33  const { theme, setTheme } = useTheme();
34  const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
35
36  const toggleTheme = () => setTheme(theme === "dark" ? "light" : "dark");
37  const toggleMobileMenu = () => {
38    setIsMobileMenuOpen((prev) => !prev);
39    onMenuClick?.();
40  };
41
42  return (
43    <header className={cn("relative z-50 w-full px-3 pt-4 md:px-6", className)}>
44      <div className="mx-auto max-w-6xl rounded-full border border-border/80 bg-background/80 px-2.5 py-2 shadow-[0_12px_40px_rgba(15,23,42,0.06)] backdrop-blur-xl">
45        <div className="flex items-center justify-between gap-3">
46          <Link
47            href={homeHref}
48            aria-label="UDX home"
49            className="group flex items-center gap-2 rounded-full px-2 py-1.5 transition-colors hover:bg-accent/60"
50          >
51            <div className="flex h-8 w-8 items-center justify-center rounded-full border border-border/80 bg-muted/60 shadow-inner shadow-white/40">
52              <svg
53                className="h-4 w-4 text-foreground shrink-0"
54                viewBox="0 0 24 24"
55                fill="none"
56                xmlns="http://www.w3.org/2000/svg"
57              >
58                <rect x="3" y="3" width="18" height="18" rx="5" className="fill-primary/10 stroke-primary" strokeWidth="1.5" />
59                <path d="M7 8H17M7 12H17M7 16H13" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
60              </svg>
61            </div>
62
63            <div className="hidden sm:flex flex-col items-start leading-none">
64              <span className="text-[11px] font-bold tracking-[0.18em] text-foreground uppercase">UDX</span>
65              <span className="mt-0.5 text-[8px] font-medium tracking-[0.22em] text-muted-foreground uppercase">UI Kit</span>
66            </div>
67          </Link>
68
69          <nav aria-label="Primary navigation" className="hidden items-center gap-1 rounded-full border border-border/70 bg-muted/30 p-1 md:flex">
70            {navigationItems.map((item) => (
71              <Button
72                key={item.label}
73                variant="ghost"
74                size="sm"
75                render={<Link href={item.href} className="rounded-full px-2.5" />}
76                className={cn(
77                  "rounded-full px-3 text-sm font-medium",
78                  item.label === "Home" ? "bg-accent text-foreground" : "text-muted-foreground hover:text-foreground",
79                )}
80              >
81                {item.label}
82              </Button>
83            ))}
84          </nav>
85
86          <div className="flex items-center gap-2">
87            <Button
88              size="sm"
89              variant="default"
90              render={<Link href={getStartedHref} className="rounded-[inherit]" />}
91              className="hidden sm:inline-flex"
92            >
93              Get Started
94            </Button>
95            <Button
96              size="sm"
97              variant="outline"
98              render={<Link href={signInHref} className="rounded-[inherit]" />}
99              className="hidden sm:inline-flex"
100            >
101              Login
102            </Button>
103
104            <Button
105              type="button"
106              onClick={toggleTheme}
107              aria-label={`Switch to ${theme === "dark" ? "light" : "dark"} mode`}
108              variant="ghost"
109              size="icon-sm"
110              className="rounded-full border border-border/70 bg-muted/30 hover:bg-accent"
111            >
112              {theme === "dark" ? (
113                <Sun className="h-[17px] w-[17px] stroke-[1.8]" />
114              ) : (
115                <Moon className="h-[17px] w-[17px] stroke-[1.8]" />
116              )}
117            </Button>
118
119            <Button
120              type="button"
121              onClick={toggleMobileMenu}
122              aria-label={isMobileMenuOpen ? "Close menu" : "Open menu"}
123              variant="ghost"
124              size="icon-sm"
125              className="rounded-full border border-border/70 bg-muted/30 hover:bg-accent md:hidden"
126            >
127              {isMobileMenuOpen ? <X className="h-[17px] w-[17px]" /> : <Menu className="h-[17px] w-[17px]" />}
128            </Button>
129          </div>
130        </div>
131      </div>
132
133      {isMobileMenuOpen && (
134        <div className="mx-auto mt-3 max-w-6xl rounded-[28px] border border-border/80 bg-background/90 p-4 shadow-[0_18px_40px_rgba(15,23,42,0.08)] backdrop-blur-xl md:hidden">
135          <nav className="flex flex-col gap-2">
136            {navigationItems.map((item) => (
137              <Button
138                key={item.label}
139                variant="ghost"
140                size="sm"
141                render={<Link href={item.href} className="w-full justify-start" />}
142                className="justify-start rounded-xl px-3 text-left text-sm font-medium text-muted-foreground hover:text-foreground"
143              >
144                {item.label}
145              </Button>
146            ))}
147          </nav>
148
149          <Separator className="my-3" />
150
151          <div className="flex flex-col gap-2">
152            <Button render={<Link href={getStartedHref} className="w-full" />} className="w-full">Get Started</Button>
153            <Button variant="outline" render={<Link href={signInHref} className="w-full" />} className="w-full">Login</Button>
154          </div>
155        </div>
156      )}
157    </header>
158  );
159}
160
161export default MinimalRoundedHeader;