{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"app-shell","type":"registry:block","title":"App Shell","description":"Sidebar, topbar and a live overview — the whole app frame.","categories":["app"],"dependencies":["lucide-react"],"registryDependencies":[],"css":{"@utility animate-status":{"animation":"status-pulse 2.4s ease-out infinite","@media (prefers-reduced-motion: reduce)":{"animation":"none"}},"@keyframes status-pulse":{"0%":{"box-shadow":"0 0 0 0 color-mix(in oklab, currentColor 45%, transparent)"},"70%, 100%":{"box-shadow":"0 0 0 6px transparent"}}},"files":[{"path":"registry/blocks/app-shell.tsx","content":"import {\n  Bell,\n  CircleGauge,\n  Folder,\n  LifeBuoy,\n  Rocket,\n  Search,\n  Settings,\n  Users,\n} from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst navigation = [\n  { label: \"Overview\", icon: CircleGauge, active: true },\n  { label: \"Deployments\", icon: Rocket, active: false },\n  { label: \"Projects\", icon: Folder, active: false },\n  { label: \"Team\", icon: Users, active: false },\n  { label: \"Settings\", icon: Settings, active: false },\n];\n\nconst deploys = [\n  { project: \"marketing-site\", env: \"production\", status: \"Ready\", time: \"2m ago\" },\n  { project: \"api-gateway\", env: \"production\", status: \"Building\", time: \"6m ago\" },\n  { project: \"docs\", env: \"preview\", status: \"Ready\", time: \"31m ago\" },\n];\n\nexport default function AppShell() {\n  return (\n    <section className=\"flex min-h-[640px] bg-background\">\n      {/* Sidebar */}\n      <aside className=\"hidden w-56 shrink-0 flex-col border-r border-border/60 md:flex\">\n        <div className=\"flex h-14 items-center gap-2 border-b border-border/60 px-4 font-semibold\">\n          <span className=\"flex size-6 items-center justify-center rounded-md bg-foreground font-mono text-xs text-background\">\n            A\n          </span>\n          Acme\n        </div>\n        <nav className=\"flex-1 space-y-0.5 p-2\">\n          {navigation.map((item) => (\n            <a\n              key={item.label}\n              href=\"#\"\n              aria-current={item.active ? \"page\" : undefined}\n              className={cn(\n                \"flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm transition-colors\",\n                item.active\n                  ? \"bg-accent font-medium\"\n                  : \"text-muted-foreground hover:bg-accent/50 hover:text-foreground\",\n              )}\n            >\n              <item.icon className=\"size-4\" />\n              {item.label}\n            </a>\n          ))}\n        </nav>\n        <div className=\"border-t border-border/60 p-2\">\n          <a\n            href=\"#\"\n            className=\"flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground\"\n          >\n            <LifeBuoy className=\"size-4\" />\n            Support\n          </a>\n        </div>\n      </aside>\n\n      {/* Main */}\n      <div className=\"flex min-w-0 flex-1 flex-col\">\n        {/* Topbar */}\n        <header className=\"flex h-14 items-center gap-3 border-b border-border/60 px-4\">\n          <p className=\"text-sm font-medium\">Overview</p>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <div className=\"hidden h-8 items-center gap-2 rounded-lg border border-input px-2.5 text-sm text-muted-foreground sm:flex\">\n              <Search className=\"size-3.5\" />\n              Search\n              <kbd className=\"rounded-sm border border-border/60 bg-muted px-1.5 font-mono text-[10px]\">\n                ⌘K\n              </kbd>\n            </div>\n            <button\n              type=\"button\"\n              aria-label=\"Notifications\"\n              className=\"flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent hover:text-foreground\"\n            >\n              <Bell className=\"size-4\" />\n            </button>\n            <span className=\"flex size-8 items-center justify-center rounded-full bg-muted font-mono text-xs font-semibold text-muted-foreground\">\n              NB\n            </span>\n          </div>\n        </header>\n\n        {/* Content */}\n        <div className=\"grid gap-4 p-4 sm:p-6\">\n          <div className=\"grid gap-4 sm:grid-cols-3\">\n            {[\n              { label: \"Deployments today\", value: \"128\" },\n              { label: \"Error rate\", value: \"0.02%\" },\n              { label: \"p95 build time\", value: \"48s\" },\n            ].map((stat) => (\n              <div\n                key={stat.label}\n                className=\"rounded-xl border border-border/60 bg-card p-4\"\n              >\n                <p className=\"text-xs text-muted-foreground\">{stat.label}</p>\n                <p className=\"mt-1.5 text-2xl font-semibold tracking-tight tabular-nums\">\n                  {stat.value}\n                </p>\n              </div>\n            ))}\n          </div>\n\n          <div className=\"overflow-hidden rounded-xl border border-border/60\">\n            <div className=\"border-b border-border/60 bg-card px-4 py-3 text-sm font-medium\">\n              Recent deployments\n            </div>\n            {deploys.map((deploy) => (\n              <div\n                key={deploy.project}\n                className=\"flex items-center justify-between border-b border-border/60 px-4 py-3 last:border-b-0\"\n              >\n                <div className=\"flex items-center gap-3\">\n                  <span\n                    className={cn(\n                      \"size-2 rounded-full\",\n                      deploy.status === \"Ready\"\n                        ? \"bg-emerald-500\"\n                        : \"bg-amber-500 animate-status\",\n                    )}\n                  />\n                  <span className=\"font-mono text-sm\">{deploy.project}</span>\n                  <span className=\"rounded-md bg-muted px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground\">\n                    {deploy.env}\n                  </span>\n                </div>\n                <span className=\"font-mono text-xs text-muted-foreground\">\n                  {deploy.time}\n                </span>\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n","type":"registry:block","target":"components/blocks/app/app-shell.tsx"}]}