From 9665dda3ad7095adad583707b88f5e9aa825c424 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Tue, 14 Oct 2025 04:55:17 +0000
Subject: [PATCH] Create BlogCategoryChips component

cgen-2427edb7d0594498a66415c7f9994156
---
 client/components/blog/BlogCategoryChips.tsx | 38 ++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 client/components/blog/BlogCategoryChips.tsx

diff --git a/client/components/blog/BlogCategoryChips.tsx b/client/components/blog/BlogCategoryChips.tsx
new file mode 100644
index 00000000..c92d1b4b
--- /dev/null
+++ b/client/components/blog/BlogCategoryChips.tsx
@@ -0,0 +1,38 @@
+import { Button } from "@/components/ui/button";
+import type { BlogCategory } from "./types";
+
+interface BlogCategoryChipsProps {
+  categories: BlogCategory[];
+  selected: string;
+  onSelect: (id: string) => void;
+}
+
+const BlogCategoryChips = ({ categories, selected, onSelect }: BlogCategoryChipsProps) => {
+  if (!categories.length) return null;
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      {categories.map((category, index) => (
+        <Button
+          key={category.id}
+          variant={selected === category.id ? "default" : "outline"}
+          size="sm"
+          onClick={() => onSelect(category.id)}
+          className={`rounded-full px-5 ${
+            selected === category.id
+              ? "bg-gradient-to-r from-aethex-500 to-neon-blue text-white shadow-lg"
+              : "border-border/50 text-muted-foreground hover:text-foreground"
+          }`}
+          style={{ animationDelay: `${index * 0.05}s` }}
+        >
+          {category.name}
+          <span className="ml-2 rounded-full bg-background/70 px-2 py-0.5 text-[0.65rem]">
+            {category.count}
+          </span>
+        </Button>
+      ))}
+    </div>
+  );
+};
+
+export default BlogCategoryChips;