frontends/src/app/cloak/PrivateAccount/PrivateCard.tsx at e2926fce2ac62bc3a764e00a3a70e882591354fc · scroll-tech/frontends · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import { Stack, Typography } from "@mui/material"

const PrivateCard = props => {
  const { Icon, title, content, sx } = props

  return (
    <Stack
      sx={{
        backgroundColor: "#21201E",
        borderRadius: "2rem",
        px: ["1.5rem", "4rem"],
        py: ["2rem", "3rem"],
        gap: "1.2rem",
        maxWidth: "400px",
        height: "min-content",
        justifyContent: "center",
        ...sx,
      }}
    >
      <Stack direction="row" sx={{ alignItems: "center", gap: "1rem" }}>
        <Icon />
        <Typography
          sx={{
            typography: "title",
            fontSize: ["1.8rem", "1.8rem"],
            lineHeight: ["2.8rem", "2.8rem"],
            color: "background.default",
          }}
        >
          {title}
        </Typography>
      </Stack>

      <Typography
        sx={{
          fontSize: ["1.6rem", "1.6rem"],
          lineHeight: ["2.4rem", "2.4rem"],
          color: "background.default",
        }}
      >
        {content}
      </Typography>
    </Stack>
  )
}

export default PrivateCard