| 1 |
import * as React from "react"; |
| 2 |
|
| 3 |
export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {} |
| 4 |
|
| 5 |
// SVG arrows for light and dark modes |
| 6 |
const dropdownArrowLight = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")`; |
| 7 |
const dropdownArrowDark = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d1d5db' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")`; |
| 8 |
|
| 9 |
const Select = React.forwardRef<HTMLSelectElement, SelectProps>( |
| 10 |
({ className = "", children, style, ...props }, ref) => { |
| 11 |
const [isDark, setIsDark] = React.useState(false); |
| 12 |
|
| 13 |
React.useEffect(() => { |
| 14 |
// Check if dark mode is active |
| 15 |
const checkDarkMode = () => { |
| 16 |
setIsDark(document.documentElement.classList.contains("dark")); |
| 17 |
}; |
| 18 |
|
| 19 |
// Initial check |
| 20 |
checkDarkMode(); |
| 21 |
|
| 22 |
// Watch for changes |
| 23 |
const observer = new MutationObserver(checkDarkMode); |
| 24 |
observer.observe(document.documentElement, { |
| 25 |
attributes: true, |
| 26 |
attributeFilter: ["class"], |
| 27 |
}); |
| 28 |
|
| 29 |
return () => observer.disconnect(); |
| 30 |
}, []); |
| 31 |
|
| 32 |
return ( |
| 33 |
<select |
| 34 |
className={`flex h-12 w-full rounded-md border-2 border-gray-300 bg-white px-4 text-base text-gray-900 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:ring-offset-gray-900 dark:focus-visible:ring-blue-400 transition-colors cursor-pointer ${className}`} |
| 35 |
ref={ref} |
| 36 |
style={{ |
| 37 |
paddingRight: "2.5rem", |
| 38 |
WebkitAppearance: "none", |
| 39 |
MozAppearance: "none", |
| 40 |
appearance: "none", |
| 41 |
backgroundImage: isDark ? dropdownArrowDark : dropdownArrowLight, |
| 42 |
backgroundRepeat: "no-repeat", |
| 43 |
backgroundPosition: "right 0.75rem center", |
| 44 |
backgroundSize: "16px 16px", |
| 45 |
...style, |
| 46 |
}} |
| 47 |
{...props} |
| 48 |
> |
| 49 |
{children} |
| 50 |
</select> |
| 51 |
); |
| 52 |
}, |
| 53 |
); |
| 54 |
Select.displayName = "Select"; |
| 55 |
|
| 56 |
export { Select }; |
| 57 |
|
