Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 | 209x 209x 209x 6x 6x 4x 3x 3x 3x 209x 5x 209x 7x 5x 5x 2x 1x 209x 1428x 209x 209x 1x 7x 154x 2x 2x 6x 1293x 1x | import { useState, useRef, type KeyboardEvent } from "react";
import { X, Plus } from "lucide-react";
import { cn } from "../../lib/utils";
type TagInputProps = {
values: string[];
onChange: (values: string[]) => void;
suggestions?: string[];
placeholder?: string;
maxItems?: number;
id?: string;
label?: string;
className?: string;
};
export function TagInput({
values,
onChange,
suggestions = [],
placeholder = "Type and press Enter to add...",
maxItems,
id,
label,
className,
}: TagInputProps) {
const [inputValue, setInputValue] = useState("");
const inputRef = useRef<HTMLInputElement>(null);
const addValue = (value: string) => {
const trimmed = value.trim();
if (!trimmed) return;
if (values.includes(trimmed)) return;
Iif (maxItems && values.length >= maxItems) return;
onChange([...values, trimmed]);
setInputValue("");
};
const removeValue = (value: string) => {
onChange(values.filter((v) => v !== value));
};
const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
if (e.key === "Enter") {
e.preventDefault();
addValue(inputValue);
} else if (e.key === "Backspace" && !inputValue && values.length > 0) {
removeValue(values[values.length - 1]);
}
};
const availableSuggestions = suggestions.filter(
(s) =>
!values.includes(s) && s.toLowerCase().includes(inputValue.toLowerCase()),
);
const isMaxReached = maxItems ? values.length >= maxItems : false;
return (
<div className={cn("space-y-3", className)}>
{/* Input and selected tags */}
<fieldset
className="flex min-h-[40px] w-full flex-wrap gap-2 rounded-md border border-border-default bg-background-elevated px-3 py-2 text-sm text-foreground-default focus-within:ring-2 focus-within:ring-primary-500 focus-within:border-transparent cursor-text m-0"
onClick={() => inputRef.current?.focus()}
onKeyDown={(e) => e.key === "Enter" && inputRef.current?.focus()}
>
<legend className="sr-only">{label || "Tags"}</legend>
{values.map((value) => (
<span
key={value}
className="inline-flex items-center gap-1 rounded bg-primary-100 px-2 py-1 text-xs font-medium text-primary-800"
>
{value}
<button
type="button"
onClick={(e) => {
e.stopPropagation();
removeValue(value);
}}
className="hover:text-primary-900"
>
<X className="h-3 w-3" />
</button>
</span>
))}
{!isMaxReached && (
<input
ref={inputRef}
id={id}
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
onKeyDown={handleKeyDown}
placeholder={values.length === 0 ? placeholder : ""}
className="flex-1 min-w-[120px] outline-none bg-transparent placeholder:text-foreground-subtle"
/>
)}
</fieldset>
{/* Suggestions */}
{availableSuggestions.length > 0 && !isMaxReached && (
<div className="space-y-2">
<p className="text-xs text-foreground-muted">
Suggestions (click to add):
</p>
<div className="flex flex-wrap gap-2">
{availableSuggestions.map((suggestion) => (
<button
key={suggestion}
type="button"
onClick={() => addValue(suggestion)}
className="inline-flex items-center gap-1 rounded-full border border-border-default bg-background-muted px-3 py-1 text-xs text-foreground-muted hover:bg-background-subtle hover:border-border-strong transition-colors"
>
<Plus className="h-3 w-3" />
{suggestion}
</button>
))}
</div>
</div>
)}
{isMaxReached && (
<p className="text-xs text-warning">
Maximum of {maxItems} items reached
</p>
)}
</div>
);
}
|