scroll-area-horizontal-demo.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-area-horizontal-demo",
  "type": "registry:example",
  "author": "shadcn (https://ui.shadcn.com)",
  "registryDependencies": [
    "scroll-area"
  ],
  "files": [
    {
      "path": "examples/scroll-area-horizontal-demo.tsx",
      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport { ScrollArea, ScrollBar } from \"@/registry/new-york/ui/scroll-area\"\n\nexport interface Artwork {\n  artist: string\n  art: string\n}\n\nexport const works: Artwork[] = [\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 Malyavko\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n]\n\nexport default function ScrollAreaHorizontalDemo() {\n  return (\n    <ScrollArea className=\"w-96 whitespace-nowrap rounded-md border\">\n      <div className=\"flex w-max space-x-4 p-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=\"pt-2 text-xs text-muted-foreground\">\n              Photo by{\" \"}\n              <span className=\"font-semibold text-foreground\">\n                {artwork.artist}\n              </span>\n            </figcaption>\n          </figure>\n        ))}\n      </div>\n      <ScrollBar orientation=\"horizontal\" />\n    </ScrollArea>\n  )\n}\n",
      "type": "registry:example",
      "target": ""
    }
  ]
}