{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "font-card",
  "type": "registry:component",
  "title": "Font Card",
  "description": "Blinkist Font Card Component",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "theme",
    "card",
    "badge"
  ],
  "files": [
    {
      "path": "components/font-card.tsx",
      "content": "import { Badge } from \"@/components/ui/badge\"\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@/components/ui/card\"\n\ninterface FontWeight {\n  weight: number\n  style: string\n  url?: string\n}\n\ninterface FontFamily {\n  name: string\n  weights: FontWeight[]\n  description: string\n  externalSource?: string\n  externalUrl?: string\n}\n\nexport function FontCard({ font }: { font: FontFamily }) {\n  const weightNames: Record<number, string> = {\n    400: \"Regular\",\n    500: \"Medium\",\n    700: \"Bold\",\n  }\n\n  return (\n    <Card className=\"overflow-hidden\">\n      <CardHeader className=\"bg-gray-50\">\n        <div className=\"flex justify-between items-center\">\n          <CardTitle>{font.name}</CardTitle>\n          {font.externalSource && (\n            <Badge variant=\"outline\" className=\"ml-2\">\n              {font.externalSource}\n            </Badge>\n          )}\n        </div>\n        <CardDescription>{font.description}</CardDescription>\n      </CardHeader>\n      <CardContent className=\"pt-6\">\n        {font.weights.length > 0 ? (\n          <div className=\"space-y-4\">\n            <h3 className=\"text-sm font-medium text-gray-500\">Available Weights & Styles</h3>\n            <div className=\"grid gap-3\">\n              {font.weights.map((weight, index) => (\n                <div key={index} className=\"flex justify-between items-center p-3 bg-gray-50 rounded-md\">\n                  <div className=\"flex items-center gap-3\">\n                    <div className=\"w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center text-primary font-medium\">\n                      {weight.weight.toString().charAt(0)}\n                    </div>\n                    <div>\n                      <p className=\"font-medium\">\n                        {weightNames[weight.weight] || weight.weight}\n                        {weight.style === \"italic\" ? \" Italic\" : \"\"}\n                      </p>\n                      <p className=\"text-xs text-gray-500\">Weight: {weight.weight}</p>\n                    </div>\n                  </div>\n                  {weight.url && (\n                    <a\n                      href={weight.url}\n                      target=\"_blank\"\n                      rel=\"noopener noreferrer\"\n                      className=\"text-xs text-primary hover:underline\"\n                    >\n                      View Font File\n                    </a>\n                  )}\n                </div>\n              ))}\n            </div>\n          </div>\n        ) : (\n          <div className=\"p-4 bg-gray-50 rounded-md\">\n            <p className=\"text-sm text-gray-500\">\n              This font is loaded from an external source.\n              {font.externalUrl && (\n                <>\n                  <br />\n                  <a\n                    href={font.externalUrl}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                    className=\"text-primary hover:underline\"\n                  >\n                    View External Stylesheet\n                  </a>\n                </>\n              )}\n            </p>\n          </div>\n        )}\n\n        <div className=\"mt-6\">\n          <h3 className=\"text-sm font-medium text-gray-500 mb-3\">Preview</h3>\n          <div\n            className=\"p-4 border rounded-md\"\n            style={{ fontFamily: font.name === \"CeraPRO\" ? \"CeraPRO, sans-serif\" : `\"${font.name}\", serif` }}\n          >\n            <p className=\"text-2xl mb-2\">The quick brown fox jumps over the lazy dog.</p>\n            <p className=\"text-base\">\n              Blinkist offers the key insights from top nonfiction in a made-for-mobile format.\n            </p>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "components/ui/badge.tsx",
      "content": "import type * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n  \"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent bg-primary text-primary-foreground hover:bg-primary/80\",\n        secondary: \"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        destructive: \"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80\",\n        outline: \"text-foreground\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n)\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n  return <div className={cn(badgeVariants({ variant }), className)} {...props} />\n}\n\nexport { Badge, badgeVariants }\n",
      "type": "registry:ui",
      "target": ""
    },
    {
      "path": "components/ui/card.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"rounded-lg border bg-card text-card-foreground shadow-sm\", className)} {...props} />\n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"flex flex-col space-y-1.5 p-6\", className)} {...props} />\n  ),\n)\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(\n  ({ className, ...props }, ref) => (\n    <h3 ref={ref} className={cn(\"text-2xl font-semibold leading-none tracking-tight\", className)} {...props} />\n  ),\n)\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(\n  ({ className, ...props }, ref) => (\n    <p ref={ref} className={cn(\"text-sm text-muted-foreground\", className)} {...props} />\n  ),\n)\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />,\n)\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"flex items-center p-6 pt-0\", className)} {...props} />\n  ),\n)\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n",
      "type": "registry:ui",
      "target": ""
    }
  ]
}