"use client" import * as React from "react" import { useEffect, useRef, useState } from "react"; import { motion } from "framer-motion"; import { X } from "lucide-react"; type Tag = { id: string; label: string; }; type TagsSelectorProps = { tags: Tag[]; }; export function TagsSelector({ tags }: TagsSelectorProps) { const [selectedTags, setSelectedTags] = useState([]); const selectedsContainerRef = useRef(null); const removeSelectedTag = (id: string) => { setSelectedTags((prev) => prev.filter((tag) => tag.id !== id)); }; const addSelectedTag = (tag: Tag) => { setSelectedTags((prev) => [...prev, tag]); }; useEffect(() => { if (selectedsContainerRef.current) { selectedsContainerRef.current.scrollTo({ left: selectedsContainerRef.current.scrollWidth, behavior: "smooth", }); } }, [selectedTags]); return (

TAGS {selectedTags.map((tag) => ( {tag.label} ))} {tags.length > selectedTags.length && ( {tags .filter( (tag) => !selectedTags.some((selected) => selected.id === tag.id) ) .map((tag) => ( addSelectedTag(tag)} style={{ borderRadius: 14, }} > {tag.label} ))} )}

); }