LicenseAPI/Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Created the Plan.jsx component

Browse Source
This commit is contained in:
Mathias Wagner 2023-07-09 03:23:05 +02:00
parent 5426a4ce47
commit 33bbbfa9d4
Signed by: Mathias
GPG Key ID: B8DC354B0A1F5B44
1 changed files with 34 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/pages/Pricing/components/Plan/Plan.jsx Normal file
View File

@ -0,0 +1,34 @@
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", height: "100%",
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} color="black">{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="primary" fontSize="large" sx={{mr: 0.5}}/>}
<Typography variant="h6" fontWeight={500} color="black">{value} {key}</Typography>
</Stack>
))}
</Stack>
</Box>
</Grow>
)
}