"use client"

import { AppWindow } from "lucide-react"

import { TopnavShell, type ShellNavItem } from "@/components/topnav-shell"

const nav: ShellNavItem[] = [
  { label: "Overview", href: "#", active: true },
  { label: "Products", href: "#" },
  { label: "Customers", href: "#" },
  { label: "Analytics", href: "#" },
  { label: "Settings", href: "#" },
]

const brand = (
  <>
    <AppWindow className="size-5" />
    <span className="text-sm font-semibold">Northwind</span>
  </>
)

function PlaceholderPage() {
  return (
    <div className="flex flex-col gap-4">
      <div className="h-7 w-48 rounded-md bg-muted" />
      <div className="grid gap-3 sm:grid-cols-2">
        <div className="h-28 rounded-lg border bg-card" />
        <div className="h-28 rounded-lg border bg-card" />
      </div>
      <div className="h-52 rounded-lg border bg-card" />
    </div>
  )
}

export function TopnavShellDemo() {
  return (
    <div className="h-[520px] w-full overflow-hidden rounded-lg border">
      <TopnavShell brand={brand} nav={nav} actions={<div className="size-7 rounded-full bg-muted" />}>
        <PlaceholderPage />
      </TopnavShell>
    </div>
  )
}
Top Nav Shell

Instalação

Exemplo

Dependências
