From 33bbbfa9d41a182cfc2e8597d6db865f23922246 Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Sun, 9 Jul 2023 03:23:05 +0200
Subject: [PATCH] Created the Plan.jsx component

---
 src/pages/Pricing/components/Plan/Plan.jsx | 34 ++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 src/pages/Pricing/components/Plan/Plan.jsx

diff --git a/src/pages/Pricing/components/Plan/Plan.jsx b/src/pages/Pricing/components/Plan/Plan.jsx
new file mode 100644
index 0000000..dcbf243
--- /dev/null
+++ b/src/pages/Pricing/components/Plan/Plan.jsx
@@ -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>
+    )
+}
\ No newline at end of file