"use client"

import { BarChart3, LayoutDashboard, Megaphone, Settings, Users } from "lucide-react"

import { AppShell, type ShellNavItem } from "@/components/app-shell"

const nav: ShellNavItem[] = [
  { label: "Dashboard", icon: LayoutDashboard, href: "#", active: true },
  { label: "Campaigns", icon: Megaphone, href: "#" },
  { label: "Audiences", icon: Users, href: "#" },
  { label: "Reports", icon: BarChart3, href: "#" },
  { label: "Settings", icon: Settings, href: "#" },
]

const brand = (
  <>
    <div className="size-6 rounded-md bg-primary" />
    <span className="text-sm font-semibold">Acme Inc</span>
  </>
)

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

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

Instalação

Exemplo

Dependências
