{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "og",
  "title": "OG image",
  "description": "generateOGImage: a default Open Graph image for docs pages, rendered with next/og.",
  "files": [
    {
      "path": "registry/base/docs/og.tsx",
      "content": "// Adapted from Fumadocs UI (https://github.com/fuma-nama/fumadocs)\n// Copyright (c) 2023 Fuma, MIT License\nimport { ImageResponse } from \"next/og\";\nimport type { ReactNode } from \"react\";\nimport type { ImageResponseOptions } from \"next/dist/compiled/@vercel/og/types\";\n\ninterface GenerateProps {\n  title: ReactNode;\n  description?: ReactNode;\n  icon?: ReactNode;\n  primaryColor?: string;\n  primaryTextColor?: string;\n  site?: ReactNode;\n}\n\nexport function generateOGImage(\n  options: GenerateProps & ImageResponseOptions,\n): ImageResponse {\n  const {\n    title,\n    description,\n    icon,\n    site,\n    primaryColor,\n    primaryTextColor,\n    ...rest\n  } = options;\n\n  return new ImageResponse(\n    generate({\n      title,\n      description,\n      icon,\n      site,\n      primaryTextColor,\n      primaryColor,\n    }),\n    {\n      width: 1200,\n      height: 630,\n      ...rest,\n    },\n  );\n}\n\nexport function generate({\n  primaryColor = \"rgba(255,150,255,0.3)\",\n  primaryTextColor = \"rgb(255,150,255)\",\n  icon = (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"56\"\n      height=\"56\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"lucide lucide-book-icon lucide-book\"\n    >\n      <circle\n        cx=\"12\"\n        cy=\"12\"\n        r=\"11\"\n        stroke={primaryTextColor}\n        strokeWidth=\"2\"\n      />\n    </svg>\n  ),\n  ...props\n}: GenerateProps) {\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        width: \"100%\",\n        height: \"100%\",\n        color: \"white\",\n        padding: \"4rem\",\n        backgroundColor: \"#0c0c0c\",\n        borderBottom: `18px solid ${primaryColor}`,\n      }}\n    >\n      <p\n        style={{\n          fontWeight: 800,\n          fontSize: \"82px\",\n          margin: 0,\n        }}\n      >\n        {props.title}\n      </p>\n      <p\n        style={{\n          fontSize: \"52px\",\n          color: \"rgba(240,240,240,0.8)\",\n          margin: 0,\n          marginTop: \"16px\",\n          paddingBottom: \"28px\",\n          borderBottom: `10px dashed ${primaryColor}`,\n        }}\n      >\n        {props.description}\n      </p>\n\n      <div\n        style={{\n          display: \"flex\",\n          flexDirection: \"row\",\n          alignItems: \"center\",\n          gap: \"20px\",\n          marginTop: \"auto\",\n          color: primaryTextColor,\n        }}\n      >\n        {icon}\n        {props.site && (\n          <p\n            style={{\n              fontSize: \"56px\",\n              fontWeight: 600,\n              margin: 0,\n            }}\n          >\n            {props.site}\n          </p>\n        )}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:lib",
      "target": "@components/docs/og.tsx"
    }
  ],
  "type": "registry:component"
}