34 lines
1.7 KiB
JavaScript
34 lines
1.7 KiB
JavaScript
import {Box, Grow, Stack, Typography, useTheme} from "@mui/material";
|
|
import {Check, Close} from "@mui/icons-material";
|
|
import LogoDark from "@/common/assets/images/logo/dark.webp";
|
|
import LogoLight from "@/common/assets/images/logo/light.webp";
|
|
|
|
export const Plan = ({name, price, features = {}}) => {
|
|
const theme = useTheme();
|
|
const isDarkMode = theme.palette.mode === "dark";
|
|
|
|
return (
|
|
<Grow in={true} timeout={1000}>
|
|
<Box sx={{border: "1px solid #E0E0E0", borderRadius: 2, p: 2, width: "20rem",
|
|
boxShadow: "0px 0px 10px rgba(0, 0, 0, 0.1)"}}>
|
|
<Stack direction="column" spacing={1}>
|
|
<Stack direction="column" alignItems="center">
|
|
<img src={isDarkMode ? LogoDark : LogoLight} alt="Logo" height={40}/>
|
|
<Typography variant="h6" fontWeight={500}>{name.toUpperCase()}</Typography>
|
|
</Stack>
|
|
<Typography variant="h6" fontWeight={500} textAlign="center">{price}</Typography>
|
|
</Stack>
|
|
|
|
<Stack direction="column" spacing={0.5} sx={{mt: 2}}>
|
|
{Object.entries(features).map(([key, value]) => (
|
|
<Stack direction="row" alignItems="center" key={key}>
|
|
{value === false ? <Close color="error" fontSize="large" sx={{mr: 0.5}}/>
|
|
: <Check color="success" fontSize="large" sx={{mr: 0.5}}/>}
|
|
<Typography variant="h6" fontWeight={500}>{value} {key}</Typography>
|
|
</Stack>
|
|
))}
|
|
</Stack>
|
|
</Box>
|
|
</Grow>
|
|
)
|
|
} |