init

app/components/Chip.tsx

@@ -0,0 +1,38 @@
+import { Check } from "lucide-react";
+import type { ReactNode } from "react";
+
+// A pill-shaped on/off toggle button for filters (cuisines, styles, appliances…).
+// Includes a visible Check icon when pressed so state never relies on color alone.
+
+interface ChipProps {
+  pressed: boolean;
+  onClick: () => void;
+  children: ReactNode;
+  /** "sm" for dense filter rows, "md" for settings panels. */
+  size?: "sm" | "md";
+  /** Dashed outline when off: tells a second filter row apart from the first. */
+  dashed?: boolean;
+}
+
+const SIZES = {
+  sm: "min-h-8 px-2.5 py-1 text-xs gap-1.5",
+  md: "min-h-9 px-3.5 py-1.5 text-sm gap-1.5",
+};
+
+export function Chip({ pressed, onClick, children, size = "md", dashed = false }: ChipProps) {
+  const look = pressed
+    ? "border-selected-line bg-selected font-medium text-ink shadow-2xs"
+    : `border-line-strong bg-surface text-ink-muted hover:border-ink-muted hover:bg-raised hover:text-ink ${dashed ? "border-dashed" : ""}`;
+
+  return (
+    <button
+      type="button"
+      aria-pressed={pressed}
+      onClick={onClick}
+      className={`trim-cap inline-flex items-center rounded-full border transition-colors ${SIZES[size]} ${look}`}
+    >
+      {pressed && <Check className="size-3.5 shrink-0 text-brand-300" strokeWidth={2.5} aria-hidden />}
+      <span className="inline-flex items-center gap-1.5">{children}</span>
+    </button>
+  );
+}