49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { ChevronDown } from "lucide-react";
|
|
import { cls } from "@/lib/utils";
|
|
|
|
interface MultiSelectProps {
|
|
label: string;
|
|
options: string[];
|
|
selectedOptions: string[];
|
|
onToggle: (option: string) => void;
|
|
ariaLabel?: string;
|
|
className?: string;
|
|
}
|
|
|
|
const MultiSelect = ({
|
|
label,
|
|
options,
|
|
selectedOptions,
|
|
onToggle,
|
|
ariaLabel,
|
|
className = "",
|
|
}: MultiSelectProps) => {
|
|
return (
|
|
<div className={cls("relative secondary-button rounded-theme", className)}>
|
|
<select
|
|
value={selectedOptions[selectedOptions.length - 1] || ""}
|
|
onChange={(e) => onToggle(e.target.value)}
|
|
aria-label={ariaLabel || label}
|
|
className={cls(
|
|
"relative z-1 w-full px-4 py-3 text-base bg-transparent focus:outline-none appearance-none cursor-pointer",
|
|
selectedOptions.length > 0 ? "text-secondary-cta-text" : "text-secondary-cta-text/75"
|
|
)}
|
|
>
|
|
<option value="" disabled>
|
|
{selectedOptions.length > 0 ? selectedOptions.join(", ") : label}
|
|
</option>
|
|
{options.map((opt) => (
|
|
<option key={opt} value={opt}>
|
|
{selectedOptions.includes(opt) ? `✓ ${opt}` : opt}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<ChevronDown className="absolute right-4 top-1/2 -translate-y-1/2 h-(--text-base) w-auto text-secondary-cta-text/75 pointer-events-none" />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MultiSelect;
|