hamid zarghami
44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
import { cn } from "@/app/lib/cn";
|
|
import { ArrowDown2 } from "iconsax-reactjs";
|
|
import { FC } from "react";
|
|
|
|
export type SelectOption = {
|
|
label: string;
|
|
value: string;
|
|
};
|
|
|
|
type Props = {
|
|
options?: readonly SelectOption[];
|
|
className?: string;
|
|
placeholder?: string;
|
|
} & Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "placeholder">;
|
|
|
|
const Select: FC<Props> = ({ options, className, placeholder, children, ...rest }) => {
|
|
return (
|
|
<div className="relative w-full" dir="rtl">
|
|
<select
|
|
className={cn(
|
|
"h-10 w-full appearance-none rounded-2xl border border-secondary bg-white px-4 pl-11 text-right text-sm transition-colors focus:border-primary disabled:pointer-events-none disabled:opacity-50",
|
|
className,
|
|
)}
|
|
{...rest}
|
|
>
|
|
{placeholder && (
|
|
<option value="" disabled hidden>
|
|
{placeholder}
|
|
</option>
|
|
)}
|
|
{options?.map((option) => (
|
|
<option key={option.value} value={option.value}>
|
|
{option.label}
|
|
</option>
|
|
))}
|
|
{children}
|
|
</select>
|
|
<ArrowDown2 aria-hidden="true" className="pointer-events-none absolute top-1/2 left-4 -translate-y-1/2 text-black" color="currentColor" size={18} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Select;
|