Navigation Block

1"use client";
2 
3import * as React from "react";
4import { Menu, Sparkles } from "lucide-react";
5 
6import { Button } from "@/components/ui/atoms/button";
7import {
8  Navbar,
9  NavbarActions,
10  NavbarBrand,
11  NavbarLink,
12  NavbarLinks,
13  NavbarMain,
14  NavbarMobileLink,
15  NavbarMobileMenu,
16  NavbarMobileToggle,
17} from "@/components/ui/organisms/navbar";
18import { cn } from "@/lib/utils";
19 
20export interface NavigationItem {
21  label: string;
22  href: string;
23}
24 
25export const navigationItems: NavigationItem[] = [
26  { label: "Overview", href: "#overview" },
27  { label: "Components", href: "#components" },
28  { label: "Blocks", href: "#blocks" },
29  { label: "Changelog", href: "#changelog" },
30];
31 
32export interface NavigationBlockProps extends React.HTMLAttributes<HTMLElement> {
33  items?: NavigationItem[];
34  activeHref?: string;
35  glass?: boolean;
36}
37 
38function NavigationBlock({
39  items = navigationItems,
40  activeHref,
41  glass = true,
42  className,
43  ...props
44}: NavigationBlockProps) {
45  return (
46    <Navbar
47      data-slot="navigation-block"
48      variant={glass ? "glass" : "bordered"}
49      className={cn("rounded-lg", className)}
50      {...props}
51    >
52      <NavbarMain>
53        <NavbarBrand href="#overview" className="min-w-0 font-semibold">
54          <span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-primary text-primary-foreground">
55            <Sparkles className="size-4" aria-hidden />
56          </span>
57          <span className="truncate">Poyraz UI</span>
58        </NavbarBrand>
59        <NavbarLinks aria-label="Primary navigation">
60          {items.map((item) => (
61            <NavbarLink
62              key={item.href}
63              href={item.href}
64              active={activeHref === item.href}
65              aria-current={activeHref === item.href ? "page" : undefined}
66            >
67              {item.label}
68            </NavbarLink>
69          ))}
70        </NavbarLinks>
71        <NavbarActions>
72          <Button variant="ghost" size="sm">
73            Sign in
74          </Button>
75          <Button size="sm">Get started</Button>
76        </NavbarActions>
77        <NavbarMobileToggle aria-label="Open navigation">
78          <Menu className="size-4" />
79        </NavbarMobileToggle>
80      </NavbarMain>
81      <NavbarMobileMenu>
82        {items.map((item) => (
83          <NavbarMobileLink
84            key={item.href}
85            href={item.href}
86            active={activeHref === item.href}
87// … truncated