Chips & tag input

"use client";
import { useState } from "react";
import { X } from "lucide-react";

export function TagInput({ label, defaultTags = [] }: { label: string; defaultTags?: string[] }) {
  const [tags, setTags] = useState(defaultTags);
  const [draft, setDraft] = useState("");

  const add = (t: string) => {
    const v = t.trim();
    if (v && !tags.includes(v)) setTags([...tags, v]);
    setDraft("");
  };

  return (
    <label className="grid gap-1.5">
      <span className="text-[13px] font-medium">{label}</span>
      <div className="flex min-h-9 cursor-text flex-wrap items-center gap-1.5 rounded border border-border-strong bg-bg px-2 py-[5px] transition focus-within:border-primary focus-within:ring-[3px] focus-within:ring-primary/20">
        {tags.map((t) => (
          <span key={t} className="inline-flex h-6 items-center gap-0.5 whitespace-nowrap rounded-sm bg-surface-2 pl-2 pr-0.5 text-[12.5px] font-medium">
            {t}
            <button type="button" aria-label={"Remove " + t} onClick={() => setTags(tags.filter((x) => x !== t))}
              className="grid size-5 place-items-center rounded-sm text-fg-subtle hover:bg-border hover:text-fg">
              <X className="size-3" aria-hidden />
            </button>
          </span>
        ))}
        <input
          value={draft}
          onChange={(e) => setDraft(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === "Enter" || e.key === ",") { e.preventDefault(); add(draft); }
            if (e.key === "Backspace" && !draft && tags.length) setTags(tags.slice(0, -1));
          }}
          onBlur={() => add(draft)}
          placeholder="Add a tag…"
          className="h-6 min-w-20 flex-1 bg-transparent text-[13.5px] text-fg outline-none placeholder:text-fg-subtle"
        />
      </div>
    </label>
  );
}

export function FilterChips({ options, value, onChange }:
  { options: { value: string; label: string; count?: number }[]; value: string; onChange: (v: string) => void }) {
  return (
    <div role="group" aria-label="Filter" className="flex flex-wrap gap-1.5">
      {options.map((o) => (
        <button key={o.value} type="button" aria-pressed={value === o.value} onClick={() => onChange(o.value)}
          className="inline-flex h-[30px] items-center gap-1.5 rounded border border-border-strong bg-bg px-3 text-[13px] font-medium text-fg-muted transition hover:bg-surface hover:text-fg aria-pressed:border-fg aria-pressed:bg-fg aria-pressed:text-bg">
          {o.label}
          {o.count !== undefined && <span className="tabular-nums opacity-70">{o.count}</span>}
        </button>
      ))}
    </div>
  );
}