Tag Input

1'use client';
2import { useState, type ReactNode } from 'react';
3import Link from 'next/link';
4import { X, Code2, Tag } from 'lucide-react';
5
6function SectionCard({ title, sourceSlug, children }: { title: string; sourceSlug?: string; children: ReactNode }) {
7  return (
8    <div>
9      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
10        <h3 className="text-theme-xl font-semibold text-gray-800 dark:text-white/90">{title}</h3>
11        {sourceSlug && (
12          <Link
13            href={sourceSlug}
14            className="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium text-brand-500 transition-colors hover:bg-brand-50 dark:text-brand-400 dark:hover:bg-brand-500/10"
15          >
16            <Code2 className="size-3.5" />
17            View Source
18          </Link>
19        )}
20      </div>
21      <div className="rounded-xl border border-gray-200 bg-white p-6 dark:border-white/5 dark:bg-gray-dark">
22        {children}
23      </div>
24    </div>
25  );
26}
27
28export function TagInputSection() {
29  const [tags, setTags] = useState(['Next.js', 'React', 'Tailwind', 'TypeScript']);
30  const [input, setInput] = useState('');
31
32  const addTag = () => {
33    const v = input.trim();
34    if (v && !tags.includes(v)) {
35      setTags((p) => [...p, v]);
36      setInput('');
37    }
38  };
39
40  return (
41    <SectionCard title="Tag Input" sourceSlug="/ui/source/ui-elements/tag-input">
42      <div className="max-w-md">
43        <div className="flex flex-wrap items-center gap-2 rounded-xl border border-gray-300 bg-white px-3 py-2 dark:border-white/10 dark:bg-gray-800">
44          {tags.map((tag) => (
45            <span key={tag} className="inline-flex items-center gap-1 rounded-lg bg-brand-50 px-2.5 py-1 text-xs font-medium text-brand-600 dark:bg-brand-500/15 dark:text-brand-400">
46              {tag}
47              <button onClick={() => setTags((p) => p.filter((t) => t !== tag))} className="hover:text-brand-800 dark:hover:text-brand-300">
48                <X className="size-3" />
49              </button>
50            </span>
51          ))}
52          <input
53            value={input}
54            onChange={(e) => setInput(e.target.value)}
55            onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addTag(); } }}
56            placeholder={tags.length === 0 ? 'Add a tag...' : ''}
57            className="flex-1 min-w-[80px] border-0 bg-transparent py-1 text-sm text-gray-800 placeholder-gray-400 outline-none dark:text-white/90 dark:placeholder-gray-500"
58          />
59        </div>
60        <p className="mt-1.5 text-xs text-gray-400">Press Enter to add a tag</p>
61      </div>
62    </SectionCard>
63  );
64}