akukanara
51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
import * as React from "react";
|
|
import { twMerge } from "tailwind-merge";
|
|
|
|
export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
|
|
options: { value: string | number; label: string }[];
|
|
}
|
|
|
|
const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
|
|
({ className, options, ...props }, ref) => {
|
|
return (
|
|
<div className="relative w-full">
|
|
<select
|
|
ref={ref}
|
|
className={twMerge(
|
|
"w-full h-11 px-4 text-sm bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-xl focus:outline-none focus:ring-2 focus:ring-[var(--accent-color)] focus:border-[var(--accent-color)] transition-all cursor-pointer appearance-none text-zinc-800 dark:text-zinc-100 pr-10",
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{options.map((opt) => (
|
|
<option key={opt.value} value={opt.value}>
|
|
{opt.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
|
|
{/* Custom Arrow Icon */}
|
|
<div className="pointer-events-none absolute right-4 top-1/2 -translate-y-1/2 flex items-center justify-center text-zinc-400">
|
|
<svg
|
|
className="w-4 h-4"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
d="M19 9l-7 7-7-7"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
Select.displayName = "Select";
|
|
|
|
export { Select };
|
|
export default Select;
|