Tag Input

1import {
2	TagInput as EmblorTagInput,
3	type Tag,
4	type TagInputProps,
5} from 'emblor'
6import { type Dispatch, type SetStateAction, useState } from 'react'
7 
8type TagInputWrapperProps = {
9	tags?: Tag[]
10	setTags: Dispatch<SetStateAction<Tag[]>>
11} & Omit<
12	TagInputProps,
13	'activeTagIndex' | 'setActiveTagIndex' | 'tags' | 'setTags'
14>
15 
16export function TagInput({
17	tags,
18	setTags,
19	name,
20	...rest
21}: TagInputWrapperProps) {
22	const [activeTagIndex, setActiveTagIndex] = useState<number | null>(null)
23 
24	return (
25		<EmblorTagInput
26			id={name}
27			styleClasses={{
28				inlineTagsContainer:
29					'border-input rounded-md dark:bg-input/30 shadow-xs transition-[color,box-shadow] focus-within:border-ring outline-none focus-within:ring-[3px] focus-within:ring-ring/50 p-1 gap-1.5',
30				input: 'w-full min-w-[80px] shadow-none px-2 h-7',
31				tag: {
32					body: 'h-7 relative bg-input/60 border border-input hover:bg-secondary rounded-md font-medium text-xs ps-2 pe-7',
33					closeButton:
34						'absolute -inset-y-px -end-px p-0 rounded-e-md flex size-7 transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] text-muted-foreground/80 hover:text-foreground',
35				},
36			}}
37			tags={tags ?? []}
38			setTags={setTags}
39			{...rest}
40			activeTagIndex={activeTagIndex}
41			setActiveTagIndex={setActiveTagIndex}
42			animation="fadeIn"
43			truncate={15}
44		/>
45	)
46}