'use client'; import { HTMLAttributes, PropsWithChildren, ReactNode, useEffect, useRef, useState, } from 'react'; import { AnimatePresence, motion } from 'framer-motion'; import { X } from 'lucide-react'; import * as React from 'react'; export type TTag = { key: string; name: string; }; type MultipleSelectProps = { tags: TTag[]; customTag?: (item: TTag) => ReactNode | string; onChange?: (value: TTag[]) => void; defaultValue?: TTag[]; }; export const MultipleSelect = ({ tags, customTag, onChange, defaultValue, }: MultipleSelectProps) => { const [selected, setSelected] = useState(defaultValue ?? []); const containerRef = useRef(null); useEffect(() => { if (containerRef?.current) { containerRef.current.scrollBy({ left: containerRef.current?.scrollWidth, behavior: 'smooth', }); } onValueChange(selected); }, [selected]); const onValueChange = (value: TTag[]) => { onChange?.(value); }; const onSelect = (item: TTag) => { setSelected((prev) => [...prev, item]); }; const onDeselect = (item: TTag) => { setSelected((prev) => prev.filter((i) => i !== item)); }; return (

TAGS {selected?.map((item) => (

{item?.name}

))} {tags?.length > selected?.length && (

{tags ?.filter((item) => !selected?.some((i) => i.key === item.key)) .map((item) => ( onSelect(item)} key={item?.key} > {customTag ? ( customTag(item) ) : ( {item?.name} )} ))}

)}

); }; type TagProps = PropsWithChildren & Pick, 'onClick'> & { name?: string; className?: string; }; export const Tag = ({ children, className, name, onClick }: TagProps) => { return ( {children} ); };