47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
import { Dispatch, SetStateAction, useState } from "react";
|
|
import { List, ListItem, Typography, useMediaQuery, useTheme } from "@mui/material";
|
|
|
|
type Props = {
|
|
setType: Dispatch<SetStateAction<"templ" | "squiz" | "reducer">>;
|
|
_mocsk_: { name: string; type: "templ" | "squiz" | "reducer" }[];
|
|
};
|
|
|
|
export default function CustomRadioButtons({ setType, _mocsk_ }: Props) {
|
|
const theme = useTheme();
|
|
const upSm = useMediaQuery(theme.breakpoints.up("sm"));
|
|
const [active, setActive] = useState<number>(0);
|
|
|
|
const activeType = (index: number, type: "templ" | "squiz" | "reducer") => {
|
|
setActive(index);
|
|
setType(type);
|
|
};
|
|
|
|
return (
|
|
<List
|
|
sx={{
|
|
marginLeft: "-10px",
|
|
width: upSm ? "430px" : "auto",
|
|
display: "flex",
|
|
flexWrap: upSm ? "" : "wrap",
|
|
fontWeight: "500",
|
|
fontSize: " 16px",
|
|
whiteSpace: "nowrap",
|
|
}}
|
|
>
|
|
{_mocsk_.map(({ name, type }, index) =>
|
|
active === index ? (
|
|
<ListItem key={type} onClick={() => activeType(index, type)} sx={{ color: "#7E2AEA", cursor: "pointer" }}>
|
|
<Typography component="span" sx={{ borderBottom: "1px solid #7E2AEA", fontSize: " 16px" }}>
|
|
{name}
|
|
</Typography>
|
|
</ListItem>
|
|
) : (
|
|
<ListItem key={type} onClick={() => activeType(index, type)} sx={{ cursor: "pointer" }}>
|
|
{name}
|
|
</ListItem>
|
|
)
|
|
)}
|
|
</List>
|
|
);
|
|
}
|