export function Field({
    label,
    children,
    widthClass,
  }: {
    label: string;
    children: React.ReactNode;
    widthClass?: string;
  }) {
    return (
      <div className={widthClass ?? "w-[180px]"}>
        <div className="mb-1 text-[11px] uppercase tracking-[0.16em] text-zinc-500">
          {label}
        </div>
        {children}
      </div>
    );
  }
  
  export function Chip({ text, onClear }: { text: string; onClear: () => void }) {
    return (
      <button
        type="button"
        onClick={onClear}
        className="rounded-full border border-zinc-800 bg-zinc-950 px-2 py-1 text-[11px] text-zinc-200 hover:bg-zinc-900"
        title="Clear filter"
      >
        {text} <span className="ml-1 text-zinc-500">×</span>
      </button>
    );
  }