{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "aspect-ratio-example",
  "title": "Aspect Ratio",
  "registryDependencies": ["aspect-ratio", "example"],
  "files": [
    {
      "path": "registry/radix-sera/examples/aspect-ratio-example.tsx",
      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { AspectRatio } from \"@/registry/radix-sera/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n  return (\n    <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n      <AspectRatio16x9 />\n      <AspectRatio21x9 />\n      <AspectRatio1x1 />\n      <AspectRatio9x16 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AspectRatio16x9() {\n  return (\n    <Example title=\"16:9\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={16 / 9}\n        className=\"rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio1x1() {\n  return (\n    <Example title=\"1:1\" className=\"items-start\">\n      <AspectRatio\n        ratio={1 / 1}\n        className=\"rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio9x16() {\n  return (\n    <Example title=\"9:16\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={9 / 16}\n        className=\"rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio21x9() {\n  return (\n    <Example title=\"21:9\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={21 / 9}\n        className=\"rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}