Use generic for SelectOption value

Author: buberdds

src/components/select/index.tsx

@@ -2,42 +2,47 @@ import { Select as BaseSelect, SelectContent, SelectItem, SelectTrigger, SelectV
 import { Label } from '../ui/label'
 import { cn } from '../../lib/utils'
 
-export type SelectOption = {
+export type SelectOption<T = string> = {
   label: string
-  value: string
+  value: T
 }
 
-export type SelectProps = {
+export type SelectProps<T = string> = {
   className?: string
-  defaultValue?: string
+  defaultValue?: T
   disabled?: boolean
-  handleChange?: (value: string) => void
+  handleChange?: (value: T) => void
   label?: string
-  options: SelectOption[]
+  options?: SelectOption<T>[]
   placeholder?: string
-  value?: string
+  value?: T
 }
 
-export const Select = ({
+export const Select = <T extends string = string>({
   className,
   defaultValue,
   disabled = false,
   handleChange,
   label,
-  options,
+  options = [],
   placeholder = 'Select an option',
   value,
-}: SelectProps) => {
+}: SelectProps<T>) => {
   return (
     <div className={cn('space-y-2', className)}>
       {label && <Label>{label}</Label>}
-      <BaseSelect value={value} onValueChange={handleChange} defaultValue={defaultValue} disabled={disabled}>
+      <BaseSelect
+        value={value as string}
+        onValueChange={handleChange as ((value: string) => void) | undefined}
+        defaultValue={defaultValue as string}
+        disabled={disabled}
+      >
         <SelectTrigger className="text-foreground font-medium data-[size=default]:h-10 w-full bg-background focus-visible:ring-ring/20">
           <SelectValue placeholder={placeholder} />
         </SelectTrigger>
         <SelectContent>
           {options.map(option => (
-            <SelectItem key={option.value} value={option.value}>
+            <SelectItem key={String(option.value)} value={String(option.value)}>
               {option.label}
             </SelectItem>
           ))}