Site Header

1"use client";
2 
3import * as React from "react";
4import {
5  ArrowRight,
6  ChevronDown,
7  CreditCard,
8  LogOut,
9  Menu,
10  Settings,
11  Sparkles,
12  User,
13} from "lucide-react";
14 
15import { Avatar, AvatarFallback } from "@/components/ui/avatar";
16import { Button } from "@/components/ui/button";
17import {
18  DropdownMenu,
19  DropdownMenuContent,
20  DropdownMenuItem,
21  DropdownMenuLabel,
22  DropdownMenuSeparator,
23  DropdownMenuTrigger,
24} from "@/components/ui/dropdown-menu";
25import {
26  Sheet,
27  SheetContent,
28  SheetDescription,
29  SheetHeader,
30  SheetTitle,
31  SheetTrigger,
32} from "@/components/ui/sheet";
33import { cn } from "@/lib/utils";
34 
35type SiteHeaderLink = { label: string; href: string };
36 
37type SiteHeader01Props = React.ComponentProps<"header"> & {
38  brand?: string;
39  links?: SiteHeaderLink[];
40  ctaLabel?: string;
41  ctaHref?: string;
42  profileName?: string;
43  profileEmail?: string;
44};
45 
46const defaultLinks: SiteHeaderLink[] = [
47  { label: "Product", href: "#product" },
48  { label: "Solutions", href: "#solutions" },
49  { label: "Customers", href: "#customers" },
50  { label: "Pricing", href: "#pricing" },
51];
52 
53function SiteHeader01({
54  brand = "Northstar",
55  links = defaultLinks,
56  ctaLabel = "Start building",
57  ctaHref = "#contact",
58  profileName = "Maya Chen",
59  profileEmail = "maya@northstar.dev",
60  className,
61  ...props
62}: SiteHeader01Props) {
63  const initials = profileName
64    .split(" ")
65    .map((part) => part[0])
66    .join("")
67    .slice(0, 2)
68    .toUpperCase();
69 
70  return (
71    <header
72      className={cn(
73        "sticky top-0 z-50 border-b border-foreground/8 bg-background/82 backdrop-blur-xl",
74        className,
75      )}
76      data-slot="site-header"
77      {...props}
78    >
79      <div className="mx-auto flex h-16 w-full max-w-7xl items-center gap-6 px-5 sm:px-8">
80        <a
81          className="flex shrink-0 items-center gap-2.5 font-semibold"
82          href="#top"
83        >
84          <span className="grid size-9 place-items-center rounded-xl bg-primary text-primary-foreground shadow-[0_10px_30px_-16px_var(--primary)]">
85            <Sparkles className="size-4" />
86          </span>
87          {brand}
88        </a>
89        <nav
90          className="hidden items-center gap-1 lg:flex"
91          aria-label="Main navigation"
92        >
93          {links.map((link) => (
94            <a
95              className="rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-foreground/[.045] hover:text-foreground"
96              href={link.href}
97// … truncated