add cards

2022-12-26 12:58:58 +03:00 · 2022-12-26 12:58:58 +03:00 · 04a4b0cfc9
commit 04a4b0cfc9
parent f433da3a35
1 changed files with 39 additions and 0 deletions
--- a/src/components/CreateQuiz/CardWithImage.tsx
+++ 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>
+    );
+}