{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "og-06",
  "title": "OG Image 06",
  "description": "With grid background pattern",
  "files": [
    {
      "path": "src/registry/og-images/og-06/route.tsx",
      "content": "import { ImageResponse } from \"next/og\";\nimport { cn } from \"@/lib/utils\";\n\nexport const runtime = \"edge\";\n\nconst interMedium = fetch(\n  new URL(\"../../../assets/fonts/Inter-Medium.ttf\", import.meta.url)\n).then((res) => res.arrayBuffer());\n\nconst interRegular = fetch(\n  new URL(\"../../../assets/fonts/Inter-Regular.ttf\", import.meta.url)\n).then((res) => res.arrayBuffer());\n\nexport async function GET(req: Request) {\n  const [fontMedium, fontRegular] = await Promise.all([\n    interMedium,\n    interRegular,\n  ]);\n\n  const url = new URL(req.url);\n  const values = Object.fromEntries(url.searchParams);\n  const mode = (values.mode || \"light\") as \"dark\" | \"light\";\n\n  return new ImageResponse(\n    <div\n      tw={cn(\n        \"relative flex h-full w-full flex-col items-center justify-center px-20\",\n        mode === \"dark\" ? \"bg-neutral-900 text-white\" : \"bg-white text-black\"\n      )}\n    >\n      {/* Background pattern */}\n      <div\n        style={{\n          backgroundImage: `\n        linear-gradient(to right, ${mode === \"dark\" ? \"rgba(255, 255, 255, 0.06)\" : \"rgba(0, 0, 0, 0.06)\"} 1px, transparent 1px),\n        linear-gradient(to bottom, ${mode === \"dark\" ? \"rgba(255, 255, 255, 0.06)\" : \"rgba(0, 0, 0, 0.06)\"} 1px, transparent 1px)\n      `,\n          backgroundSize: \"32px 32px\",\n          WebkitMaskImage:\n            \"radial-gradient(ellipse 60% 60% at 50% 50%, transparent 40%, #000 60%)\",\n          maskImage:\n            \"radial-gradient(ellipse 60% 60% at 50% 50%, transparent 40%, #000 60%)\",\n        }}\n        tw=\"absolute inset-0 z-0 -top-1 -left-1\"\n      />\n\n      <div tw=\"flex items-center\">\n        <div\n          tw={cn(\n            \"flex h-9 w-9 items-center justify-center rounded-lg\",\n            mode === \"dark\"\n              ? \"bg-white text-black\"\n              : \"bg-neutral-800 text-white\"\n          )}\n        >\n          <svg\n            fill=\"none\"\n            height={30}\n            stroke=\"currentColor\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth=\"2\"\n            viewBox=\"0 0 24 24\"\n            width={30}\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <circle cx=\"12\" cy=\"12\" r=\"10\" />\n            <path d=\"m14.31 8 5.74 9.94\" />\n            <path d=\"M9.69 8h11.48\" />\n            <path d=\"m7.38 12 5.74-9.94\" />\n            <path d=\"M9.69 16 3.95 6.06\" />\n            <path d=\"M14.31 16H2.83\" />\n            <path d=\"m16.62 12-5.74 9.94\" />\n          </svg>\n        </div>\n        <span tw=\"ml-4 text-xl font-medium\">Shadcn UI Blocks</span>\n      </div>\n\n      <h1 tw=\"mt-8 text-6xl text-center leading-[1.2] tracking-tighter max-w-2xl mx-auto\">\n        Beautifully Designed Shadcn UI Blocks\n      </h1>\n      <p tw=\"mt-4 text-center text-2xl text-neutral-500 max-w-2xl mx-auto leading-relaxed\">\n        Shadcn UI Blocks is a collection of beautifully designed block and\n        components for your next project.\n      </p>\n    </div>,\n    {\n      width: 1200,\n      height: 630,\n      fonts: [\n        {\n          name: \"Inter\",\n          data: fontMedium,\n          style: \"normal\",\n          weight: 500,\n        },\n        {\n          name: \"Inter\",\n          data: fontRegular,\n          style: \"normal\",\n          weight: 400,\n        },\n      ],\n    }\n  );\n}\n",
      "type": "registry:page",
      "target": "app/api/og/og-06/route.tsx"
    }
  ],
  "type": "registry:item"
}