init app

components/CustomerChips.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+export function CustomerChips({
+  customers,
+  onRemove,
+  disabled = false,
+}: {
+  customers: { id: string; name: string }[];
+  onRemove: (id: string) => void;
+  disabled?: boolean;
+}) {
+  if (customers.length === 0) return null;
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      {customers.map((c) => (
+        <span
+          key={c.id}
+          className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full border-2 border-border bg-surface text-sm font-medium"
+        >
+          {c.name}
+          {!disabled && (
+            <button
+              type="button"
+              onClick={() => onRemove(c.id)}
+              className="text-muted hover:text-danger ml-0.5 cursor-pointer"
+              aria-label={`Remove ${c.name}`}
+            >
+              &times;
+            </button>
+          )}
+        </span>
+      ))}
+    </div>
+  );
+}