File size: 2,945 Bytes
88da18c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | import React from 'react';
import { motion, AnimatePresence, type HTMLMotionProps } from 'framer-motion';
import { cn } from '@/utils/helpers';
interface SelectProps extends Omit<HTMLMotionProps<'select'>, 'ref'> {
label?: string;
error?: string;
icon?: React.ReactNode;
options: Array<{ value: string; label: string }>;
helperText?: string;
containerClassName?: string;
}
const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
(
{
label,
error,
icon,
options,
helperText,
containerClassName,
className,
...props
},
ref
) => {
return (
<div className={cn('w-full', containerClassName)}>
{label && (
<label className="block text-sm font-medium text-slate-300 mb-2">
{label}
{props.required && <span className="text-red-500 ml-1">*</span>}
</label>
)}
<div className="relative">
{icon && (
<div className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none z-10">
{icon}
</div>
)}
<motion.select
ref={ref}
whileFocus={{
boxShadow: '0 0 0 3px rgba(34, 197, 94, 0.1)',
}}
className={cn(
'w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-2.5 appearance-none',
'text-slate-50',
'transition-all duration-200',
'focus:outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20',
'cursor-pointer',
icon && 'pl-10',
error && 'border-red-500 focus:border-red-500 focus:ring-red-500/20',
className
)}
{...props}
>
{options.map((opt) => (
<option key={opt.value} value={opt.value}>
{opt.label}
</option>
))}
</motion.select>
<div className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 6L8 10L12 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
</div>
<AnimatePresence mode="wait">
{error && (
<motion.p
initial={{ opacity: 0, y: -4 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -4 }}
className="text-sm text-red-500 mt-1"
>
{error}
</motion.p>
)}
</AnimatePresence>
{helperText && !error && (
<p className="text-xs text-slate-500 mt-1">{helperText}</p>
)}
</div>
);
}
);
Select.displayName = 'Select';
export default Select;
|