{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "category-04",
  "type": "registry:block",
  "title": "Category 04",
  "files": [
    {
      "path": "src/components/commercn/categories/category-04.tsx",
      "content": "import { cn } from \"@/lib/utils\";\nimport { Play } from \"lucide-react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\n\ntype StoryStatus = \"default\" | \"live\";\n\nconst categories = [\n  {\n    name: \"Skincare\",\n    image: \"https://images.unsplash.com/photo-1670201202961-dce15b9e6939?w=900&auto=format&fit=crop\",\n    status: \"live\" as StoryStatus,\n  },\n  {\n    name: \"Makeup\",\n    image: \"https://images.unsplash.com/photo-1512496015851-a90fb38ba796?q=80&w=200&auto=format&fit=crop\",\n    status: \"default\" as StoryStatus,\n  },\n  {\n    name: \"Nails\",\n    image: \"https://images.unsplash.com/photo-1604654894610-df63bc536371?q=80&w=200&auto=format&fit=crop\",\n    status: \"default\" as StoryStatus,\n  },\n  {\n    name: \"Fragrance\",\n    image: \"https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=200&auto=format&fit=crop\",\n    status: \"default\" as StoryStatus,\n  },\n  {\n    name: \"Tools\",\n    image: \"https://images.unsplash.com/photo-1596462502278-27bfdc403348?q=80&w=200&auto=format&fit=crop\",\n    status: \"default\" as StoryStatus,\n  },\n  {\n    name: \"Organic\",\n    image: \"https://images.unsplash.com/photo-1608248597279-f99d160bfcbc?q=80&w=200&auto=format&fit=crop\",\n    status: \"default\" as StoryStatus,\n  },\n  {\n    name: \"Hair\",\n    image: \"https://images.unsplash.com/photo-1598662972299-5408ddb8a3dc?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzV8fGJlYXV0eSUyMHByb2R1Y3R8ZW58MHx8MHx8fDA%3D\",\n    status: \"default\" as StoryStatus,\n  }\n];\n\nexport function CategoryFour() {\n  return (\n    <section className=\"w-full max-w-3xl mx-auto overflow-hidden\">\n      <div className=\"grid grid-cols-4 md:grid-cols-7 gap-4 scrollbar-hide\">\n        {categories.map((category) => (\n          <div\n            key={category.name}\n            className=\"flex flex-col items-center gap-2 cursor-pointer group\"\n          >\n            <div\n              className={cn(\n                \"relative size-16 md:size-18 lg:size-20 xl:size-22 rounded-full p-1 transition-all duration-300\",\n                category.status === \"default\" && \"bg-gray-200 dark:bg-neutral-800\",\n                category.status === \"live\" && \"bg-gradient-to-tr from-pink-500 via-red-500 to-yellow-400\"\n              )}\n            >\n              <img\n                src={category.image}\n                alt={category.name}\n                className=\"size-full rounded-full object-cover ring-2 ring-white dark:ring-neutral-950\"\n              />\n              {category.status === \"live\" && (\n                <>\n                  <div className=\"absolute inset-1 rounded-full bg-black/20 flex items-center justify-center\">\n                    <Play className=\"size-5 text-white fill-white\" />\n                  </div>\n                  <Badge className=\"absolute -bottom-2 left-1/2 -translate-x-1/2 bg-red-500 hover:bg-red-500 text-white text-xs font-bold border-2 border-white dark:border-neutral-950\">\n                    LIVE\n                  </Badge>\n                </>\n              )}\n            </div>\n            <span className=\"text-sm lg:text-base font-bold text-gray-700 dark:text-white\">\n              {category.name}\n            </span>\n          </div>\n        ))}\n      </div>\n    </section>\n  );\n}",
      "type": "registry:component"
    }
  ]
}