import { useEffect, useState } from 'react'
import { Input } from './ui/input'
import { XIcon } from 'lucide-react'
interface Props {
placeholder: string
onValueChange?: (value: string[]) => {}
}
interface TagProps {
value: string
onClick: () => void
}
const TagInput: React.FC<Props> = ({ placeholder, onValueChange }) => {
const [values, setValues] = useState<string[]>([])
useEffect(() => {
if (onValueChange) {
onValueChange(values)
}
}, [values, onValueChange])
return (
<div className='flex flex-col'>
<div className='my-4 flex h-max w-full flex-wrap gap-2'>
{values.length !== 0 &&
values.map((v, i) => (
<Tag key={i} value={v} onClick={() => setValues(prev => prev.filter(value => value !== v))} />
))}
</div>
<Input
placeholder={placeholder}
onKeyDown={event => {
if (event.key === 'Enter') {
if (!values.find(v => v === event.currentTarget.value)) {
setValues([...values, event.currentTarget.value])
event.currentTarget.value = ''
}
}
}}
/>
</div>
)
}
const Tag: React.FC<TagProps> = ({ value, onClick }) => {
return (
<>
<div className='flex items-center justify-center gap-2 rounded-md bg-muted p-1 text-muted-foreground'>
<p className='text-md'>{value}</p> <XIcon size={15} onClick={onClick} className='text-white' />
</div>
</>
)
}
export default TagInput