{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "explorer-03",
  "title": "Explorer 03",
  "description": "One viewer that switches between several organs from a menu, here the heart, kidneys, stomach and pancreas. Models licensed CC BY 4.0 and CC BY-SA 2.1 JP.",
  "dependencies": [
    "@base-ui/react@^1.8.0",
    "class-variance-authority@^0.7.1",
    "cn@^0.5.0"
  ],
  "registryDependencies": [
    "select",
    "@organui/heart",
    "@organui/kidneys",
    "@organui/organ-viewer",
    "@organui/pancreas",
    "@organui/stomach"
  ],
  "files": [
    {
      "path": "registry/base-nova/blocks/explorer-03/page.tsx",
      "content": "import { OrganSwitcher } from \"@/components/organ-switcher\"\nimport { heartModel } from \"@/components/heart\"\nimport { kidneysModel } from \"@/components/kidneys\"\nimport { pancreasModel } from \"@/components/pancreas\"\nimport { stomachModel } from \"@/components/stomach\"\n\nexport default function Page() {\n  return (\n    <main className=\"mx-auto flex min-h-svh w-full max-w-5xl flex-col gap-6 p-6 md:p-10\">\n      <div className=\"flex flex-col gap-1\">\n        <h1 className=\"text-2xl font-semibold tracking-tight\">Organs</h1>\n        <p className=\"text-muted-foreground\">\n          Pick an organ, then select a structure to learn about it.\n        </p>\n      </div>\n      <OrganSwitcher\n        models={[heartModel, kidneysModel, stomachModel, pancreasModel]}\n      />\n    </main>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/organs/page.tsx"
    },
    {
      "path": "registry/base-nova/blocks/explorer-03/components/organ-switcher.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"cn\"\n\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { OrganViewer, type OrganModel } from \"@/components/organ-viewer\"\n\n// One viewer for several organs. Switching remounts the viewer, so each organ\n// opens in its own default view with nothing selected.\nexport function OrganSwitcher({\n  models,\n  defaultOrgan = models[0]?.name,\n  className,\n}: {\n  models: readonly OrganModel[]\n  /** Name of the organ shown first. Defaults to the first model. */\n  defaultOrgan?: string\n  className?: string\n}) {\n  const [organ, setOrgan] = React.useState(defaultOrgan)\n  const [selectedId, setSelectedId] = React.useState<string | null>(null)\n  const model = models.find(({ name }) => name === organ) ?? models[0]\n  if (!model) return null\n  const selected = model.structures.find(({ id }) => id === selectedId)\n  return (\n    <div className={cn(\"flex flex-col gap-4\", className)}>\n      <div className=\"flex flex-wrap items-center justify-between gap-3\">\n        <div className=\"flex flex-col gap-0.5\">\n          <h2 className=\"text-lg font-semibold\">{model.name}</h2>\n          <p className=\"text-sm text-muted-foreground\">\n            {model.structures.length} structures, {model.views.length} views\n          </p>\n        </div>\n        <Select\n          items={models.map(({ name }) => ({ label: name, value: name }))}\n          value={model.name}\n          onValueChange={(next) => {\n            if (!next) return\n            setOrgan(next)\n            setSelectedId(null)\n          }}\n        >\n          <SelectTrigger aria-label=\"Organ\" className=\"min-w-40\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {models.map(({ name }) => (\n                <SelectItem key={name} value={name}>\n                  {name}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n      <OrganViewer\n        key={model.name}\n        model={model}\n        selectedId={selectedId}\n        onSelectionChange={setSelectedId}\n        className=\"h-[28rem]\"\n      />\n      <p className=\"text-sm text-muted-foreground\" role=\"status\">\n        {selected\n          ? `${selected.label}: ${selected.description ?? selected.group}`\n          : `Select a structure of the ${model.name.toLowerCase()} to learn about it.`}\n      </p>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "docs": "Explorer 03: https://organui.com/blocks#explorer-03. Keep the organ viewer's model credit visible.",
  "categories": [
    "explorer"
  ],
  "type": "registry:block"
}