{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "portfolio70",
  "title": "Book Recommendations Grid",
  "description": "Grid of book cards displaying cover images, titles, authors, star ratings, and category badges. Perfect for sharing reading lists and book recommendations on personal sites.",
  "dependencies": [
    "clsx",
    "tailwind-merge",
    "lucide-react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/portfolio70/portfolio70.tsx",
      "content": "\"use client\";\nimport { Star } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface BookItem {\n  title: string;\n  subtitle?: string;\n  image: {\n    src: string;\n    alt: string;\n  };\n  rating: number;\n  badge?: string;\n}\n\ninterface Portfolio70Props {\n  heading?: string;\n  description?: string;\n  items?: BookItem[];\n  className?: string;\n}\n\nexport const portfolio70Demo: Portfolio70Props = {\n  heading: \"What I'm Reading\",\n  description: \"Books that have shaped my thinking and work.\",\n  items: [\n    {\n      title: \"The Design of Everyday Things\",\n      subtitle: \"Don Norman\",\n      image: {\n        src: \"https://oud.pics/sm/l/book1.webp\",\n        alt: \"The Design of Everyday Things book cover\",\n      },\n      rating: 5,\n      badge: \"Design\",\n    },\n    {\n      title: \"Thinking, Fast and Slow\",\n      subtitle: \"Daniel Kahneman\",\n      image: {\n        src: \"https://oud.pics/sm/l/book2.webp\",\n        alt: \"Thinking, Fast and Slow book cover\",\n      },\n      rating: 5,\n      badge: \"Psychology\",\n    },\n    {\n      title: \"Atomic Habits\",\n      subtitle: \"James Clear\",\n      image: {\n        src: \"https://oud.pics/sm/l/book3.webp\",\n        alt: \"Atomic Habits book cover\",\n      },\n      rating: 4,\n      badge: \"Productivity\",\n    },\n    {\n      title: \"Zero to One\",\n      subtitle: \"Peter Thiel\",\n      image: {\n        src: \"https://oud.pics/sm/l/book4.webp\",\n        alt: \"Zero to One book cover\",\n      },\n      rating: 4,\n      badge: \"Business\",\n    },\n  ],\n};\n\nexport function Portfolio70({ heading, description, items = [], className }: Portfolio70Props) {\n  return (\n    <section className={cn(\"py-16 md:py-24 w-full\", className)}>\n      <div className=\"mx-auto max-w-6xl px-4 md:px-6\">\n        {(heading || description) && (\n          <div className=\"mb-12 text-center\">\n            {heading && (\n              <h2 className=\"text-3xl font-bold tracking-tight md:text-4xl\">{heading}</h2>\n            )}\n            {description && <p className=\"mt-4 text-lg text-muted-foreground\">{description}</p>}\n          </div>\n        )}\n        <div className=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n          {items.map((item, index) => (\n            <div\n              key={index}\n              className=\"group/portfolio70 flex flex-col rounded-md border bg-card p-4 text-center transition-colors hover:bg-muted/50\"\n            >\n              <div className=\"relative mx-auto h-44 w-28\">\n                <img\n                  className=\"absolute inset-0 size-full rounded-md object-cover shadow-md transition-transform group-hover/portfolio70:scale-105\"\n                  src={item.image.src}\n                  alt={item.image.alt}\n                />\n              </div>\n              <h3 className=\"mt-4 font-semibold\">{item.title}</h3>\n              {item.subtitle && <p className=\"text-sm text-muted-foreground\">{item.subtitle}</p>}\n              <div className=\"mt-auto pt-3\">\n                <div className=\"flex justify-center gap-0.5\">\n                  {Array.from({ length: 5 }).map((_, i) => (\n                    <Star\n                      key={i}\n                      className={cn(\n                        \"size-4\",\n                        i < item.rating ? \"fill-primary text-primary\" : \"text-muted-foreground/30\"\n                      )}\n                    />\n                  ))}\n                </div>\n                {item.badge && <p className=\"mt-2 text-xs text-muted-foreground\">{item.badge}</p>}\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/beste/block/portfolio70.tsx"
    }
  ],
  "type": "registry:block"
}