From 04a4b0cfc9b8d82b68bc93032c655f5afa62a82e Mon Sep 17 00:00:00 2001
From: nflnkr <105123049+nflnkr@users.noreply.github.com>
Date: Mon, 26 Dec 2022 12:58:58 +0300
Subject: [PATCH] add cards

---
 src/components/CreateQuiz/CardWithImage.tsx | 39 +++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/components/CreateQuiz/CardWithImage.tsx

diff --git a/src/components/CreateQuiz/CardWithImage.tsx b/src/components/CreateQuiz/CardWithImage.tsx
new file mode 100644
index 00000000..fb3f83f3
--- /dev/null
+++ b/src/components/CreateQuiz/CardWithImage.tsx
@@ -0,0 +1,39 @@
+import { Box, Typography, useTheme } from "@mui/material";
+
+
+interface Props {
+    image: string;
+    text: string;
+}
+
+export default function CardWithImage({ image, text }: Props) {
+    const theme = useTheme();
+
+    return (
+        <Box sx={{
+            flexGrow: 1,
+            borderRadius: "12px",
+            backgroundColor: "white",
+            boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24), 
+                        0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
+                        0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
+                        0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12), 
+                        0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
+                        0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
+        }}>
+            <img
+                style={{
+                    width: "100%",
+                    display: "block",
+                    borderBottom: `1px solid ${theme.palette.grey2.main}`,
+                }}
+                src={image}
+                alt="card"
+            />
+            <Typography
+                color={theme.palette.grey3.main}
+                p="20px"
+            >{text}</Typography>
+        </Box>
+    );
+}
\ No newline at end of file