{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "workspace-home",
  "title": "Workspace home",
  "description": "A workspace start page in Tiles: a pill navbar, a large search, an inverted offer tile, deal bars and the week's schedule.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "@manniche/chart-kit",
    "@manniche/data-tile",
    "@manniche/bar-chart",
    "@manniche/week-schedule"
  ],
  "files": [
    {
      "path": "registry/manniche/workspace-home/workspace-home.tsx",
      "content": "// A workspace home screen (pill navbar, large search, offer tile, deals bars, week schedule).\nimport { Search } from 'lucide-react'\nimport { useState } from 'react'\nimport { cn } from '@/lib/utils'\nimport { BarChart, type BarPoint } from '@/registry/manniche/bar-chart/bar-chart'\nimport { BigNumber } from '@/registry/manniche/chart-kit/chart-kit'\nimport { DataTile, TileFact } from '@/registry/manniche/data-tile/data-tile'\nimport { WeekSchedule, type ScheduleCategory, type ScheduleEvent } from '@/registry/manniche/week-schedule/week-schedule'\n\nexport type WorkspaceHomeData = {\n  nav: { id: string; label: string }[]\n  offer: { title: string; text: string; action: string }\n  schedule: { title: string; weekStart: string; now?: string; events: ScheduleEvent[]; categories?: ScheduleCategory[] }\n  deals: { title: string; total: number; points: BarPoint[]; currency?: string }\n}\n\nexport type WorkspaceHomeLabels = { search?: string; searchLabel?: string; navLabel?: string; note?: string }\n\nexport type WorkspaceHomeProps = {\n  data: WorkspaceHomeData\n  labels?: WorkspaceHomeLabels\n  onSearch?: (query: string) => void\n  onOffer?: () => void\n  className?: string\n}\n\nexport function WorkspaceHome({ data, labels, onSearch, onOffer, className }: WorkspaceHomeProps) {\n  const t = { search: 'Search the workspace', searchLabel: 'Search', navLabel: 'Workspace', note: 'Example data.', ...labels }\n  const [current, setCurrent] = useState(data.nav[0]?.id)\n  const [q, setQ] = useState('')\n  const money = { currency: data.deals.currency ?? 'EUR', decimals: 0 }\n  return (\n    <div className={cn('@container flex w-full flex-col gap-3 rounded-2xl bg-background p-3 text-foreground', className)}>\n      <nav aria-label={t.navLabel} className=\"flex gap-1 self-start overflow-x-auto rounded-full border border-border bg-card p-1\">\n        {data.nav.map((n) => (\n          <button\n            key={n.id}\n            type=\"button\"\n            aria-current={n.id === current ? 'page' : undefined}\n            onClick={() => setCurrent(n.id)}\n            className={cn(\n              'rounded-full px-4 py-1.5 text-sm text-muted-foreground hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring',\n              n.id === current && 'bg-foreground text-background hover:text-background',\n            )}\n          >\n            {n.label}\n          </button>\n        ))}\n      </nav>\n      <form\n        role=\"search\"\n        onSubmit={(e) => {\n          e.preventDefault()\n          onSearch?.(q)\n        }}\n        className=\"flex items-center gap-3 rounded-2xl border border-border bg-card px-5 py-4 focus-within:outline-2 focus-within:outline-ring\"\n      >\n        <Search className=\"size-5 text-muted-foreground\" aria-hidden />\n        <input\n          type=\"search\"\n          value={q}\n          onChange={(e) => setQ(e.target.value)}\n          aria-label={t.searchLabel}\n          placeholder={t.search}\n          className=\"min-w-0 flex-1 bg-transparent text-lg outline-none placeholder:text-muted-foreground\"\n        />\n      </form>\n      <div className=\"grid grid-cols-1 gap-3 @2xl:grid-cols-5\">\n        <div className=\"@2xl:col-span-2\">\n          <DataTile className=\"h-full\" title={data.offer.title} inverted>\n            <p className=\"text-sm opacity-80\">{data.offer.text}</p>\n            <button\n              type=\"button\"\n              onClick={onOffer}\n              className=\"mt-4 rounded-full bg-foreground px-4 py-2 text-sm font-medium text-background transition-transform active:scale-[0.97] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n            >\n              {data.offer.action}\n            </button>\n          </DataTile>\n        </div>\n        <div className=\"@2xl:col-span-3\">\n          <DataTile className=\"h-full\" title={data.deals.title} footer={t.note}>\n            <TileFact>\n              <BigNumber value={data.deals.total} format={money} size=\"lg\" />\n            </TileFact>\n            <BarChart data={data.deals.points} label={data.deals.title} format={money} />\n          </DataTile>\n        </div>\n        <div className=\"@2xl:col-span-5\">\n          <DataTile className=\"h-full\" title={data.schedule.title} footer={t.note}>\n            <WeekSchedule\n              data={data.schedule.events}\n              label={data.schedule.title}\n              weekStart={data.schedule.weekStart}\n              now={data.schedule.now}\n              categories={data.schedule.categories}\n            />\n          </DataTile>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "templates"
  ],
  "type": "registry:block"
}