43 lines
1.5 KiB
JavaScript
43 lines
1.5 KiB
JavaScript
import React from 'react';
|
|
|
|
const Select = React.forwardRef(({ label, error, options, className = '', ...props }, ref) => {
|
|
return (
|
|
<div className={`flex flex-col gap-1 ${className}`}>
|
|
{label && (
|
|
<label className="text-[var(--t-small)] font-medium text-fg-muted">
|
|
{label}
|
|
</label>
|
|
)}
|
|
<select
|
|
ref={ref}
|
|
className={`
|
|
w-full px-4 py-2.5 bg-paper border border-bg-warm rounded-[var(--r-sm)]
|
|
text-fg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent
|
|
transition-all cursor-pointer appearance-none
|
|
${error ? 'border-red-500 focus:ring-red-500' : ''}
|
|
`}
|
|
style={{
|
|
backgroundImage: `url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e")`,
|
|
backgroundRepeat: 'no-repeat',
|
|
backgroundPosition: 'right 1rem center',
|
|
backgroundSize: '1em'
|
|
}}
|
|
{...props}
|
|
>
|
|
{options.map((opt) => (
|
|
<option key={opt.value} value={opt.value}>
|
|
{opt.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
{error && (
|
|
<span className="text-xs text-red-500 mt-1">{error}</span>
|
|
)}
|
|
</div>
|
|
);
|
|
});
|
|
|
|
Select.displayName = 'Select';
|
|
|
|
export default Select;
|