54 lines
1.2 KiB
TypeScript
54 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import * as React from "react";
|
|
import { Select as KumoSelect } from "@cloudflare/kumo/components/select";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export type SelectOption = {
|
|
value: string;
|
|
label: React.ReactNode;
|
|
disabled?: boolean;
|
|
};
|
|
|
|
type SelectProps = {
|
|
"aria-label"?: string;
|
|
className?: string;
|
|
defaultValue?: string;
|
|
disabled?: boolean;
|
|
label?: React.ReactNode;
|
|
name?: string;
|
|
onValueChange?: (value: string) => void;
|
|
options: SelectOption[];
|
|
placeholder?: string;
|
|
required?: boolean;
|
|
value?: string;
|
|
};
|
|
|
|
export function Select({
|
|
className,
|
|
onValueChange,
|
|
options,
|
|
placeholder,
|
|
value,
|
|
defaultValue,
|
|
...props
|
|
}: SelectProps): React.ReactElement {
|
|
return (
|
|
<KumoSelect<string>
|
|
className={cn("w-full", className)}
|
|
defaultValue={defaultValue}
|
|
onValueChange={(nextValue) => onValueChange?.(String(nextValue))}
|
|
placeholder={placeholder}
|
|
value={value}
|
|
{...props}
|
|
>
|
|
{options.map((option) => (
|
|
<KumoSelect.Option key={option.value} disabled={option.disabled} value={option.value}>
|
|
{option.label}
|
|
</KumoSelect.Option>
|
|
))}
|
|
</KumoSelect>
|
|
);
|
|
}
|