{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gallery-shop",
  "title": "Gallery shop",
  "description": "A gallery and shop page in Tiles: a side menu, a two-tone headline, counters, events and collections with optional pictures.",
  "registryDependencies": [
    "utils",
    "@manniche/data-tile",
    "@manniche/chart-kit"
  ],
  "files": [
    {
      "path": "registry/manniche/gallery-shop/gallery-shop.tsx",
      "content": "// A gallery shop screen: vertical side menu, a two-tone headline, counters, events and collections.\n// Each collection takes an optional image; without one it is drawn as a colour tile, so the demo carries no third-party media.\nimport { useState } from 'react'\nimport { cn } from '@/lib/utils'\nimport { BigNumber } from '@/registry/manniche/chart-kit/chart-kit'\nimport { DataTile, TileFact } from '@/registry/manniche/data-tile/data-tile'\n\nexport type GalleryShopData = {\n  menu: { id: string; label: string }[]\n  headline: { strong: string; soft: string }\n  counters: { id: string; title: string; value: number }[]\n  events: { title: string; items: { id: string; date: string; title: string; place: string }[] }\n  collections: { title: string; items: { id: string; name: string; works: number; color: string; /** Cover image URL. Falls back to the colour tile. */ image?: string }[] }\n}\n\nexport type GalleryShopLabels = { note?: string; menuLabel?: string; works?: (n: number) => string }\n\nexport type GalleryShopProps = { data: GalleryShopData; labels?: GalleryShopLabels; className?: string }\n\nexport function GalleryShop({ data, labels, className }: GalleryShopProps) {\n  const note = labels?.note ?? 'Example data.'\n  const works = labels?.works ?? ((n: number) => `${n} works`)\n  const [current, setCurrent] = useState(data.menu[0]?.id)\n  return (\n    <div className={cn('@container w-full rounded-2xl bg-background p-3 text-foreground', className)}>\n      <div className=\"flex flex-col gap-3 @lg:flex-row\">\n        <nav aria-label={labels?.menuLabel ?? 'Gallery'} className=\"flex shrink-0 gap-1 overflow-x-auto @lg:w-40 @lg:flex-col\">\n          {data.menu.map((m) => (\n            <button\n              key={m.id}\n              type=\"button\"\n              aria-current={m.id === current ? 'page' : undefined}\n              onClick={() => setCurrent(m.id)}\n              className={cn('shrink-0 rounded-xl px-3 py-2 text-left text-sm text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring', m.id === current && 'bg-foreground text-background hover:bg-foreground hover:text-background')}\n            >\n              {m.label}\n            </button>\n          ))}\n        </nav>\n        <div className=\"grid min-w-0 flex-1 grid-cols-1 gap-3 @2xl:grid-cols-6\">\n          <h2 className=\"px-1 text-[clamp(28px,4vw,48px)] font-semibold leading-tight tracking-tight @2xl:col-span-6\">\n            {data.headline.strong} <span className=\"text-muted-foreground\">{data.headline.soft}</span>\n          </h2>\n          {data.counters.map((c) => (\n            <div key={c.id} className=\"@2xl:col-span-2\">\n              <DataTile className=\"h-full\" title={c.title} density=\"compact\">\n                <TileFact>\n                  <BigNumber value={c.value} size=\"lg\" />\n                </TileFact>\n              </DataTile>\n            </div>\n          ))}\n          <div className=\"@2xl:col-span-3\">\n            <DataTile className=\"h-full\" title={data.events.title} inverted>\n              <ul className=\"flex flex-col gap-3\">\n                {data.events.items.map((e) => (\n                  <li key={e.id} className=\"flex flex-col text-sm\">\n                    <span className=\"text-xs opacity-70\">{e.date} · {e.place}</span>\n                    <span className=\"font-medium\">{e.title}</span>\n                  </li>\n                ))}\n              </ul>\n            </DataTile>\n          </div>\n          <div className=\"@2xl:col-span-3\">\n            <DataTile className=\"h-full\" title={data.collections.title} footer={note}>\n              <ul className=\"grid grid-cols-2 gap-2\">\n                {data.collections.items.map((c) => (\n                  <li key={c.id} className=\"flex flex-col gap-1.5\">\n                    {c.image ? (\n                      <img src={c.image} alt=\"\" loading=\"lazy\" className=\"aspect-[4/3] w-full rounded-xl object-cover\" style={{ background: c.color }} />\n                    ) : (\n                      <span aria-hidden className=\"aspect-[4/3] rounded-xl\" style={{ background: c.color }} />\n                    )}\n                    <span className=\"text-sm font-medium\">{c.name}</span>\n                    <span className=\"text-xs text-muted-foreground\">{works(c.works)}</span>\n                  </li>\n                ))}\n              </ul>\n            </DataTile>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "templates"
  ],
  "type": "registry:block"
}