Create index.tsx

src/components/molecules/FilterChips/index.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import * as React from "react";
+import { X } from "lucide-react";
+import { Badge } from "@/components/atoms/Badge";
+import { Icon } from "@/components/atoms/Icon";
+import { cn } from "@/lib/utils";
+
+export interface FilterOption {
+  label: string;
+  value: string;
+  count?: number;
+}
+
+interface FilterChipsProps {
+  options: FilterOption[];
+  selectedValues: string[];
+  onToggle: (value: string) => void;
+  onClearAll?: () => void;
+  className?: string;
+}
+
+/**
+ * FilterChips Molecule
+ * Displays a horizontal list of interactive badges for search filtering.
+ * Uses the Badge atom for consistent academic styling.
+ */
+export function FilterChips({
+  options,
+  selectedValues,
+  onToggle,
+  onClearAll,
+  className,
+}: FilterChipsProps) {
+  return (
+    <div className={cn("flex flex-wrap items-center gap-2", className)}>
+      {options.map((option) => {
+        const isSelected = selectedValues.includes(option.value);
+
+        return (
+          <button
+            key={option.value}
+            onClick={() => onToggle(option.value)}
+            className="focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 rounded-full"
+            aria-pressed={isSelected}
+          >
+            <Badge
+              variant={isSelected ? "default" : "secondary"}
+              className={cn(
+                "cursor-pointer px-3 py-1 text-[11px] transition-all",
+                isSelected 
+                  ? "bg-primary text-primary-foreground shadow-sm" 
+                  : "hover:bg-muted-foreground/10"
+              )}
+            >
+              {option.label}
+              {option.count !== undefined && (
+                <span className={cn(
+                  "ml-1.5 opacity-60 font-normal",
+                  isSelected ? "text-primary-foreground" : "text-muted-foreground"
+                )}>
+                  ({option.count})
+                </span>
+              )}
+              {isSelected && (
+                <Icon icon={X} size={10} className="ml-1.5 opacity-80" />
+              )}
+            </Badge>
+          </button>
+        );
+      })}
+
+      {selectedValues.length > 0 && onClearAll && (
+        <button
+          onClick={onClearAll}
+          className="ml-2 text-[11px] font-medium text-muted-foreground hover:text-primary transition-colors underline-offset-4 hover:underline"
+        >
+          Clear all
+        </button>
+      )}
+    </div>
+  );
+}