rule-template-button RuleTemplateButton.tsx

0% Statements 0/63

0% Branches 0/1

0% Functions 0/1

0% Lines 0/63

Press n or j to go to the next uncovered block, b, p or k for the previous block.


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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { css } from '@emotion/react';
import { memo, type ReactNode } from 'react';

import { LazySvg, Stack, Typography, UnstyledButton } from '@allshares/studio-design-system';

interface RuleTemplateButtonProps {
  readonly title: ReactNode;
  readonly description: ReactNode;
  readonly svg: ReactNode;
  readonly onClick: () => void;
}

export const RuleTemplateButton = memo(function RuleTemplateButton({
  description,
  onClick,
  svg,
  title,
}: RuleTemplateButtonProps) {
  return (
    <UnstyledButton
      css={(theme) => css`
        box-shadow: ${theme.ds.shadows.hard};
        border-radius: ${theme.ds.borderRadiuses.squared};

        overflow: hidden;

        [data-color-scheme='dark'] & {
          border: 1px solid ${theme.ds.colors.dark[600]};
        }
      `}
      onClick={onClick}
    >
      <LazySvg
        aspectRatio={376 / 98}
        width="100%"
      >
        {svg}
      </LazySvg>

      <Stack
        gap={4}
        css={css`
          padding: 12px 20px;
        `}
      >
        <Typography variant="bodyBaseBold">{title}</Typography>

        <Typography
          variant="bodySmallRegular"
          css={(theme) => css`
            color: ${theme.ds.colors.gray[700]};

            [data-color-scheme='dark'] & {
              color: ${theme.ds.colors.gray[400]};
            }
          `}
        >
          {description}
        </Typography>
      </Stack>
    </UnstyledButton>
  );
});