'use client'; import { motion, AnimatePresence } from 'framer-motion'; import { type KeyboardEvent, useCallback, useState } from 'react'; import { cn } from '@/lib/utils'; interface Option { id: string; label: string; } interface FluidSelectorProps { options: Option[]; value: string | string[]; onChange: (value: string | string[]) => void; multiple?: boolean; className?: string; } const CheckIcon = ({ className }: { className?: string }) => ( ); export function FluidSelector({ options, value, onChange, multiple = false, className }: FluidSelectorProps) { const selectedValues = Array.isArray(value) ? value : value ? [value] : []; const isSelected = useCallback( (optionId: string) => selectedValues.includes(optionId), [selectedValues] ); const handleSelect = useCallback( (optionId: string) => { if (multiple) { const newValue = isSelected(optionId) ? selectedValues.filter((v) => v !== optionId) : [...selectedValues, optionId]; onChange(newValue); } else { onChange(isSelected(optionId) ? '' : optionId); } }, [multiple, isSelected, selectedValues, onChange] ); const handleKeyDown = useCallback( (event: KeyboardEvent, optionId: string) => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); handleSelect(optionId); } }, [handleSelect] ); return (

{options.map((option) => { const selected = isSelected(option.id); return ( handleSelect(option.id)} onKeyDown={(e) => handleKeyDown(e, option.id)} layout initial={false} animate={{ backgroundColor: selected ? '#121212' : '#eaeaea', color: selected ? '#ffffff' : '#000000' }} transition={{ layout: { type: 'spring', stiffness: 500, damping: 35 }, backgroundColor: { duration: 0.25, ease: 'easeOut' }, color: { duration: 0.2, ease: 'easeOut' } }} whileTap={{ scale: 0.97 }} whileHover={{ scale: 1.02 }} className={cn( 'flex items-center justify-center gap-2 px-6 py-3 rounded-full', 'text-lg font-normal leading-[25px] tracking-normal', 'cursor-pointer select-none', 'outline-none focus-visible:ring-2 focus-visible:ring-offset-2', selected ? 'focus-visible:ring-gray-900' : 'focus-visible:ring-gray-400' )} > {option.label} {selected && ( )} ); })}

); } // Default export with demo state for standalone showcase const DEFAULT_OPTIONS: Option[] = [ { id: 'under-20k', label: 'Under £20k' }, { id: '20-50k', label: '£20-£50k' }, { id: '50-80k', label: '£50-£80k' }, { id: '80-150k', label: '£80-£150k' }, { id: 'over-150k', label: 'Over £150k' }, { id: 'not-sure', label: 'Not sure' } ]; export default function FluidSelector01() { const [selected, setSelected] = useState('under-20k'); const handleChange = (value: string | string[]) => { setSelected(typeof value === 'string' ? value : value[0] || ''); }; return (

); }

Fluid Selector

Tech

Category