updated DropdownOption to support dynamic prop type

src/components/DropdownInput.tsx

@@ -6,32 +6,36 @@ import {
     SelectChangeEvent,
     Stack,
     Typography,
+    TypographyTypeMap,
 } from '@mui/material';
 
-export interface DropdownOption {
+export interface DropdownOption<T> {
     label: string;
-    value: string;
+    value: T;
 }
 
-interface Iprops {
+interface Iprops<T> {
     label: string;
-    options: DropdownOption[];
+    labelProps: TypographyTypeMap['props'];
+    options: DropdownOption<T>[];
     message?: string;
     selectedValue: string;
-    setSelectedValue: (selectedValue: string) => void;
-    placeholder: string;
+    setSelectedValue: (selectedValue: T) => void;
+    placeholder?: string;
 }
-const DropdownInput = ({
+
+export default function DropdownInput<T>({
     label,
+    labelProps,
     options,
     message,
     selectedValue,
     placeholder,
     setSelectedValue,
-}: Iprops) => {
+}: Iprops<T>) {
     return (
         <Stack spacing={'4px'}>
-            <Typography color={'inherit'}>{label}</Typography>
+            <Typography {...labelProps}>{label}</Typography>
             <Select
                 IconComponent={ExpandMore}
                 displayEmpty
@@ -66,22 +70,22 @@ const DropdownInput = ({
                         color: theme.palette.stroke.muted,
                     },
                 })}
-                renderValue={(selected) =>
-                    selected?.length === 0 ? (
-                        <Box color={'text.secondary'}>{placeholder}</Box>
+                renderValue={(selected) => {
+                    return !selected?.length ? (
+                        <Box color={'text.secondary'}>{placeholder ?? ''}</Box>
                     ) : (
                         options.find((o) => o.value === selected).label
-                    )
-                }
+                    );
+                }}
                 value={selectedValue}
                 onChange={(event: SelectChangeEvent) => {
-                    setSelectedValue(event.target.value);
+                    setSelectedValue(event.target.value as T);
                 }}>
                 {options.map((option, index) => (
                     <MenuItem
                         key={option.label}
                         divider={index !== options.length - 1}
-                        value={option.value}
+                        value={option.value as string}
                         sx={{
                             px: '16px',
                             py: '14px',
@@ -98,6 +102,4 @@ const DropdownInput = ({
             )}
         </Stack>
     );
-};
-
-export default DropdownInput;
+}