'use client'; import { Tags, TagsTrigger, TagsContent, TagsInput, TagsItem, TagsList, TagsEmpty, TagsGroup, TagsValue, } from '@/components/ui/shadcn-io/tags'; import { useState } from 'react'; import { CheckIcon } from 'lucide-react'; const tags = [ { id: "react", label: "React" }, { id: "typescript", label: "TypeScript" }, { id: "javascript", label: "JavaScript" }, { id: "nextjs", label: "Next.js" }, { id: "vuejs", label: "Vue.js" }, { id: "angular", label: "Angular" }, { id: "svelte", label: "Svelte" }, { id: "nodejs", label: "Node.js" }, { id: "python", label: "Python" }, { id: "ruby", label: "Ruby" }, { id: "java", label: "Java" }, { id: "csharp", label: "C#" }, { id: "php", label: "PHP" }, { id: "go", label: "Go" }, ]; const Example = () => { const [selected, setSelected] = useState([]); const handleRemove = (value: string) => { if (!selected.includes(value)) { return; } console.log(`removed: ${value}`); setSelected((prev) => prev.filter((v) => v !== value)); } const handleSelect = (value: string) => { if (selected.includes(value)) { handleRemove(value); return; } console.log(`selected: ${value}`); setSelected((prev) => [...prev, value]); } return (

{selected.map((tag) => ( handleRemove(tag)}> {tags.find((t) => t.id === tag)?.label} ))} {tags.map((tag) => ( {tag.label} {selected.includes(tag.id) && ( )} ))}

); } export default Example;