Tag Input

npx shadcn@latest add https://blocks.aiskillhub.info/api/registry/tag-input

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

export function TagInput({ initial = [] }: { initial?: string[] }) {
  const [tags, setTags] = useState<string[]>(initial);
  const [value, setValue] = useState("");
  return (
    <div className="flex flex-wrap items-center gap-1.5 rounded-xl border border-border bg-background p-2 focus-within:ring-2 focus-within:ring-ring">
      {tags.map((t) => (
        <span key={t} className="flex items-center gap-1 rounded-md bg-surface-2 px-2 py-0.5 text-xs font-medium">
          {t}
          <button onClick={() => setTags((p) => p.filter((x) => x !== t))} aria-label={`Remove ${t}`}><X className="h-3 w-3" /></button>
        </span>
      ))}
      <input value={value} onChange={(e) => setValue(e.target.value)}
        onKeyDown={(e) => { if (e.key === "Enter" && value.trim()) { setTags((p) => [...new Set([...p, value.trim()])]); setValue(""); } }}
        placeholder="Add tag…" className="flex-1 bg-transparent px-1 text-sm outline-none" />
    </div>
  );
}