45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
|
import { Box, IconButton, Typography } from "@mui/material";
|
||
|
|
import { useState } from "react";
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
text: string;
|
||
|
|
icon: any;
|
||
|
|
};
|
||
|
|
export default function SwichResult({ text, icon }: Props) {
|
||
|
|
const [active, setActive] = useState<boolean>(false);
|
||
|
|
return (
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
p: "14px",
|
||
|
|
mb: "14px",
|
||
|
|
display: "flex",
|
||
|
|
justifyContent: "space-between",
|
||
|
|
border: "1px solid #9A9AAF",
|
||
|
|
borderRadius: "8px",
|
||
|
|
alignItems: "center",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "left" }}>
|
||
|
|
<img src={icon} alt="icon" />
|
||
|
|
<Typography sx={{ color: "#9A9AAF", ml: "14px" }}>{text}</Typography>
|
||
|
|
</Box>
|
||
|
|
|
||
|
|
<IconButton disableRipple onClick={() => setActive(!active)}>
|
||
|
|
<svg width="52" height="30" viewBox="0 0 52 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="52" height="30" rx="15" fill={active ? "#7E2AEA" : "#9A9AAF"} />
|
||
|
|
<rect
|
||
|
|
x={active ? "23" : "1"}
|
||
|
|
y="1"
|
||
|
|
width="28"
|
||
|
|
height="28"
|
||
|
|
rx="14"
|
||
|
|
fill="white"
|
||
|
|
stroke={active ? "#7E2AEA" : "#9A9AAF"}
|
||
|
|
stroke-width="2"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</IconButton>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
}
|