"use client" import { MouseEvent, useState } from "react" // shadcn import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Checkbox } from "@/components/ui/checkbox" import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover" // third-party import { cn } from "cn" // assets import { ChevronDown, X } from "lucide-react" const techOptions = [ { label: "React", value: "react" }, { label: "TypeScript", value: "typescript" }, { label: "Next.js", value: "nextjs" }, { label: "Tailwind CSS", value: "tailwindcss" }, { label: "Node.js", value: "nodejs" }, { label: "GraphQL", value: "graphql" }, { label: "PostgreSQL", value: "postgresql" }, ] // ------------------------------ | SELECT - MULTI SELECT | ------------------------------ // export function SelectMulti() { const [selected, setSelected] = useState([ "react", "nextjs", "tailwindcss", ]) const [open, setOpen] = useState(false) const handleToggle = (value: string) => { setSelected((prev) => prev.includes(value) ? prev.filter((item) => item !== value) : [...prev, value] ) } const handleRemove = (value: string, e: MouseEvent) => { e.stopPropagation() setSelected((prev) => prev.filter((item) => item !== value)) } return (

{selected.length === 0 ? ( Select skills... ) : ( selected.map((value) => { const option = techOptions.find((o) => o.value === value) if (!option) return null return ( {option.label} handleRemove(value, e)} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault() handleRemove(value, e as any) } }} className="cursor-pointer rounded-full p-0.5 hover:bg-muted-foreground/20" > ) }) )}

{techOptions.map((option) => { const isSelected = selected.includes(option.value) return ( ) })}

) }