diff --git a/client/src/Components/v2/Inputs/Select.tsx b/client/src/Components/v2/Inputs/Select.tsx index 7d47286da..54aacf68a 100644 --- a/client/src/Components/v2/Inputs/Select.tsx +++ b/client/src/Components/v2/Inputs/Select.tsx @@ -1,6 +1,8 @@ -import Select from "@mui/material/Select"; +import { Typography, Select } from "@mui/material"; +import MenuItem from "@mui/material/MenuItem"; import type { SelectProps } from "@mui/material/Select"; import { useTheme } from "@mui/material/styles"; +import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; export const SelectInput: React.FC = ({ ...props }) => { const theme = useTheme(); @@ -20,3 +22,67 @@ export const SelectInput: React.FC = ({ ...props }) => { /> ); }; + +type ItemTypes = string | number; +interface SelectItem { + _id: ItemTypes; + name: string; +} +export type CustomSelectProps = SelectProps & { + items: SelectItem[]; + placeholder?: string; + isHidden?: boolean; + hasError?: boolean; +}; + +export const SelectFromItems: React.FC = ({ + items, + placeholder, + isHidden = false, + hasError = false, + ...props +}) => { + return ( + { + if (!selected) { + return ( + + {placeholder ?? ""} + + ); + } + const selectedItem = items.find((item) => item._id === selected); + const displayName = selectedItem ? selectedItem.name : placeholder; + return ( + + {displayName} + + ); + }} + {...props} + > + {items.map((item) => ( + + {item.name} + + ))} + + ); +}; + +SelectInput.displayName = "SelectInput"; +SelectFromItems.displayName = "SelectFromItems";