push-notifications-dapp/src/modules/rewards/components/DashboardSectionHeader.tsx at fa5392bb256bed7e4faf856a8df68136d9eb0bd7 · pushchain/push-notifications-dapp · 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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
// React and other libraries
import { FC } from 'react';

// Third party libraries
import { css } from 'styled-components';

//components
import { Box, Button, Points, Text } from 'blocks';

export type DashboardSectionHeaderProps = {
  onGetStarted: () => void;
};

const DashboardSectionHeader: FC<DashboardSectionHeaderProps> = ({ onGetStarted }) => {
  return (
    <Box
      borderRadius="radius-md"
      display="flex"
      padding={{ tb: 'spacing-sm', initial: 'spacing-md' }}
      alignItems="center"
      justifyContent="space-between"
      flexDirection={{ tb: 'column', initial: 'row' }}
      css={css`
        background: radial-gradient(circle, rgba(222, 190, 255, 1) 0%, rgba(192, 255, 247, 1) 85%);
      `}
    >
      <Box
        width="-webkit-fill-available"
        display="flex"
        flexDirection={{ tb: 'column', initial: 'row' }}
        gap={{ tb: 'spacing-sm' }}
        alignItems={{ tb: 'stretch', initial: 'center' }}
        justifyContent="space-between"
      >
        <Box
          gap="spacing-xs"
          display="flex"
          alignItems="center"
        >
          <Points />
          <Box
            display="flex"
            flexDirection="column"
          >
            <Text
              variant="h4-semibold"
              color="text-on-light-bg"
            >
              Push Points S1 Ends on Feb 28!
            </Text>
            <Box maxWidth={{ tb: 'auto', initial: '607px' }}>
              <Text
                variant="bl-regular"
                color="text-on-light-bg"
              >
                Claim all tasks and prepare for the end of S1 of Push Reward Points. Prizes will be announced on Feb
                25th. Leaderboards snapshot on Mar 1, 2025.
              </Text>
            </Box>
          </Box>
        </Box>

        <Button
          variant="tertiary"
          size="medium"
          onClick={onGetStarted}
        >
          Get Started
        </Button>
      </Box>
    </Box>
  );
};

export { DashboardSectionHeader };