scroll-area-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-area-example",
  "title": "Scroll Area",
  "registryDependencies": [
    "scroll-area",
    "separator",
    "example"
  ],
  "files": [
    {
      "path": "registry/radix-mira/examples/scroll-area-example.tsx",
      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { ScrollArea, ScrollBar } from \"@/registry/radix-mira/ui/scroll-area\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nconst works = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyav\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n] as const\n\nexport default function ScrollAreaExample() {\n  return (\n    <ExampleWrapper>\n      <ScrollAreaVertical />\n      <ScrollAreaHorizontal />\n    </ExampleWrapper>\n  )\n}\n\nfunction ScrollAreaVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ScrollArea className=\"mx-auto h-72 w-48 rounded-md border\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\">{tag}</div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </Example>\n  )\n}\n\nfunction ScrollAreaHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ScrollArea className=\"mx-auto w-full max-w-96 rounded-md border p-4\">\n        <div className=\"flex gap-4\">\n          {works.map((artwork) => (\n            <figure key={artwork.artist} className=\"shrink-0\">\n              <div className=\"overflow-hidden rounded-md\">\n                <Image\n                  src={artwork.art}\n                  alt={`Photo by ${artwork.artist}`}\n                  className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                  width={300}\n                  height={400}\n                />\n              </div>\n              <figcaption className=\"text-muted-foreground pt-2 text-xs\">\n                Photo by{\" \"}\n                <span className=\"text-foreground font-semibold\">\n                  {artwork.artist}\n                </span>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}