56 lines
1.3 KiB
TypeScript
56 lines
1.3 KiB
TypeScript
|
import { useState } from "react";
|
||
|
|
import { Select as MuiSelect, MenuItem, useTheme } from "@mui/material";
|
||
|
|
import classnames from "classnames";
|
||
|
|
|
||
|
|
import { cardShadow } from "@root/utils/themes/shadow";
|
||
|
|
|
||
|
|
import "./select.css";
|
||
|
|
|
||
|
|
import checkIcon from "@root/assets/Icons/check.svg";
|
||
|
|
|
||
|
|
type SelectProps = {
|
||
|
|
items: string[];
|
||
|
|
selectedItem: number;
|
||
|
|
setSelectedItem: (num: number) => void;
|
||
|
|
};
|
||
|
|
|
||
|
|
export const Select = ({
|
||
|
|
items,
|
||
|
|
selectedItem,
|
||
|
|
setSelectedItem,
|
||
|
|
}: SelectProps) => {
|
||
|
|
const [opened, setOpened] = useState<boolean>(false);
|
||
|
|
const theme = useTheme();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<MuiSelect
|
||
|
|
className="select"
|
||
|
|
value={selectedItem}
|
||
|
|
onChange={(event) => setSelectedItem(Number(event.target.value))}
|
||
|
|
sx={{
|
||
|
|
width: "100%",
|
||
|
|
color: theme.palette.brightPurple.main,
|
||
|
|
border: "2px solid #ffffff",
|
||
|
|
borderRadius: "30px",
|
||
|
|
fontWeight: "bold",
|
||
|
|
boxShadow: cardShadow,
|
||
|
|
}}
|
||
|
|
open={opened}
|
||
|
|
onClick={() => setOpened((isOpened) => !isOpened)}
|
||
|
|
IconComponent={() => (
|
||
|
|
<img
|
||
|
|
src={checkIcon}
|
||
|
|
alt="check"
|
||
|
|
className={classnames("select-icon", { opened })}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{items.map((item, index) => (
|
||
|
|
<MenuItem key={item + index} value={index}>
|
||
|
|
{item}
|
||
|
|
</MenuItem>
|
||
|
|
))}
|
||
|
|
</MuiSelect>
|
||
|
|
);
|
||
|
|
};
|