Public Header

1"use client"
2 
3import { useEffect, useState } from "react"
4import Link from "next/link"
5import { useRouter } from "next/navigation"
6import {
7  Search,
8  ExternalLink,
9  FileText,
10  Twitter,
11  Github,
12  Linkedin,
13  Home,
14  LayoutGrid,
15  type LucideIcon,
16} from "lucide-react"
17import { GovBanner } from "@/registry/ui/gov-banner"
18import {
19  CommandDialog,
20  Command,
21  CommandEmpty,
22  CommandGroup,
23  CommandInput,
24  CommandItem,
25  CommandList,
26  CommandSeparator,
27} from "@/registry/ui/command"
28 
29// Types
30export interface NavLink {
31  label: string
32  href: string
33  external?: boolean
34}
35 
36export interface CommandItemType {
37  label: string
38  icon?: LucideIcon
39  href?: string
40  action?: () => void
41  external?: boolean
42}
43 
44export interface CommandGroupType {
45  heading: string
46  items: CommandItemType[]
47}
48 
49const DEFAULT_NAV_LINKS: NavLink[] = [
50  { label: "COMPONENTS", href: "/demo", external: false },
51  { label: "CV", href: "https://www.gregjohns.dev", external: true },
52  { label: "GITHUB", href: "https://github.com/gjohnsx", external: true },
53  { label: "LINKEDIN", href: "https://linkedin.com/in/greg-johns", external: true },
54  { label: "X", href: "https://x.com/gjohnsx", external: true },
55]
56 
57interface PublicHeaderProps {
58  title?: string
59  logoSrc?: string
60  logoAlt?: string
61  homeHref?: string
62  navLinks?: NavLink[]
63  commandGroups?: CommandGroupType[]
64}
65 
66export function PublicHeader({
67  title = "TTB Label Verification",
68  logoSrc = "/logo/app-seal/treasury.png",
69  logoAlt = "Treasury",
70  homeHref = "/",
71  navLinks = DEFAULT_NAV_LINKS,
72  commandGroups,
73}: PublicHeaderProps) {
74  const [open, setOpen] = useState(false)
75  const router = useRouter()
76 
77  useEffect(() => {
78    const down = (e: KeyboardEvent) => {
79      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
80        e.preventDefault()
81        setOpen((open) => !open)
82      }
83    }
84 
85    document.addEventListener("keydown", down)
86    return () => document.removeEventListener("keydown", down)
87  }, [])
88 
89  const runCommand = (command: () => void) => {
90    setOpen(false)
91    command()
92  }
93 
94  // Default command groups if not provided
95  const defaultCommandGroups: CommandGroupType[] = [
96    {
97      heading: "Navigation",
98      items: [
99        {
100          label: "Home",
101          icon: Home,
102          action: () => router.push(homeHref),
103        },
104        {
105          label: "Components",
106          icon: LayoutGrid,
107          action: () => router.push("/demo"),
108        },
109      ],
110    },
111    {
112// … truncated