38 lines
1005 B
TypeScript
38 lines
1005 B
TypeScript
|
import { List, ListItem, Typography } from "@mui/material";
|
||
|
|
import { useState } from "react";
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
_mocsk_: { name: string; url: string }[];
|
||
|
|
};
|
||
|
|
|
||
|
|
export const StepperSample: React.FC<Props> = ({ _mocsk_ }) => {
|
||
|
|
const [active, setActive] = useState<number>();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<List
|
||
|
|
sx={{
|
||
|
|
marginLeft: "-10px",
|
||
|
|
width: "430px",
|
||
|
|
display: "flex",
|
||
|
|
fontWeight: "500",
|
||
|
|
fontSize: " 16px",
|
||
|
|
whiteSpace: "nowrap",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{_mocsk_.map(({ name, url }, index) =>
|
||
|
|
active === index ? (
|
||
|
|
<ListItem onClick={() => setActive(index)} sx={{ color: "#7E2AEA", cursor: "pointer" }}>
|
||
|
|
<Typography component="span" sx={{ borderBottom: "1px solid #7E2AEA", fontSize: " 16px" }}>
|
||
|
|
{name}
|
||
|
|
</Typography>
|
||
|
|
</ListItem>
|
||
|
|
) : (
|
||
|
|
<ListItem onClick={() => setActive(index)} sx={{ cursor: "pointer" }}>
|
||
|
|
{name}
|
||
|
|
</ListItem>
|
||
|
|
)
|
||
|
|
)}
|
||
|
|
</List>
|
||
|
|
);
|
||
|
|
};
|