{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "grid",
  "title": "Grid",
  "description": "A framed, technical Open Graph image with a dashed border grid and a corner brand mark.",
  "files": [
    {
      "path": "registry/components/grid/index.tsx",
      "content": "export interface GridProps {\n  title: string;\n  description: string;\n  brand: string;\n  logo?: string;\n}\n\nexport const Grid = ({ title, description, brand, logo = \"\" }: GridProps) => (\n  <div\n    style={{\n      backgroundColor: \"#0a0a0a\",\n      color: \"#ffffff\",\n      display: \"flex\",\n      height: \"100%\",\n      position: \"relative\",\n      width: \"100%\",\n    }}\n  >\n    <div\n      style={{\n        borderLeft: \"1px dashed #44403c\",\n        bottom: 0,\n        left: \"64px\",\n        position: \"absolute\",\n        top: 0,\n        width: \"1px\",\n      }}\n    />\n    <div\n      style={{\n        borderLeft: \"1px dashed #44403c\",\n        bottom: 0,\n        position: \"absolute\",\n        right: \"64px\",\n        top: 0,\n        width: \"1px\",\n      }}\n    />\n    <div\n      style={{\n        borderTop: \"1px dashed #44403c\",\n        height: \"1px\",\n        left: 0,\n        position: \"absolute\",\n        right: 0,\n        top: \"64px\",\n      }}\n    />\n    <div\n      style={{\n        borderTop: \"1px dashed #44403c\",\n        bottom: \"64px\",\n        height: \"1px\",\n        left: 0,\n        position: \"absolute\",\n        right: 0,\n      }}\n    />\n\n    <div\n      style={{\n        bottom: \"128px\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        justifyContent: \"center\",\n        left: \"128px\",\n        position: \"absolute\",\n        right: \"128px\",\n        top: \"128px\",\n        width: \"896px\",\n      }}\n    >\n      <div\n        style={{\n          display: \"flex\",\n          flexGrow: 1,\n          fontSize: title && title.length > 20 ? 64 : 80,\n          fontWeight: 600,\n          letterSpacing: \"-0.04em\",\n          lineHeight: 1.1,\n          textWrap: \"balance\",\n        }}\n      >\n        {title}\n      </div>\n      <div\n        style={{\n          color: \"#a8a29e\",\n          display: \"flex\",\n          flexGrow: 1,\n          fontSize: \"40px\",\n          fontWeight: 500,\n          lineHeight: 1.5,\n          marginTop: \"24px\",\n          textWrap: \"balance\",\n        }}\n      >\n        {description}\n      </div>\n    </div>\n\n    <div\n      style={{\n        alignItems: \"center\",\n        bottom: \"96px\",\n        display: \"flex\",\n        gap: \"14px\",\n        position: \"absolute\",\n        right: \"96px\",\n      }}\n    >\n      {logo ? (\n        <img\n          alt=\"\"\n          height={48}\n          src={logo}\n          width={48}\n          style={{\n            borderRadius: \"12px\",\n            objectFit: \"contain\",\n          }}\n        />\n      ) : (\n        <div\n          style={{\n            alignItems: \"center\",\n            backgroundColor: \"#ffffff\",\n            borderRadius: \"12px\",\n            color: \"#0a0a0a\",\n            display: \"flex\",\n            fontSize: \"26px\",\n            fontWeight: 800,\n            height: \"48px\",\n            justifyContent: \"center\",\n            width: \"48px\",\n          }}\n        />\n      )}\n      <span\n        style={{\n          fontSize: \"30px\",\n          fontWeight: 600,\n        }}\n      >\n        {brand}\n      </span>\n    </div>\n  </div>\n);\n",
      "type": "registry:component",
      "target": "components/og/grid.tsx"
    }
  ],
  "type": "registry:component"
}