"use client"; import * as React from "react"; import { useState } from "react"; import { motion, AnimatePresence } from "motion/react"; export type SelectorChipsProps = { options: string[]; onChange?: (selected: string[]) => void; }; const SelectorChips: React.FC = ({ options, onChange }) => { const [selected, setSelected] = useState([]); const toggleChip = (option: string) => { const updated = selected.includes(option) ? selected.filter((o) => o !== option) : [...selected, option]; setSelected(updated); onChange?.(updated); }; return (

{options.map((option) => { const isSelected = selected.includes(option); return ( toggleChip(option)} initial={false} animate={{ backgroundColor: isSelected ? "#FC5212" : "#fff", borderColor: isSelected ? "#f54900" : "#d1d5db", color: isSelected ? "#fff" : "#1f2937", width: isSelected ? 120 : 100, transition: { backgroundColor: { duration: 0.15 }, color: { duration: 0.15 }, borderColor: { duration: 0.15 }, width: { type: "spring", stiffness: 400, damping: 20 }, }, }} className="flex items-center justify-center px-4 py-2 rounded-full text-sm font-medium border transition overflow-hidden grow cursor-pointer" style={{ minWidth: 100 }} >

{option} {isSelected && ( {/* Tickmark SVG */} )}

); })}

); }; export { SelectorChips };