1 | import React, { forwardRef } from 'react'
|
2 | import { Box, Flex } from 'reflexbox'
|
3 |
|
4 | export { Box, Flex }
|
5 |
|
6 | export const Text = forwardRef((props, ref) =>
|
7 | <Box
|
8 | ref={ref}
|
9 | tx='text'
|
10 | {...props}
|
11 | />
|
12 | )
|
13 |
|
14 | export const Heading = forwardRef((props, ref) =>
|
15 | <Box
|
16 | ref={ref}
|
17 | as='h2'
|
18 | tx='text'
|
19 | {...props}
|
20 | __css={{
|
21 | fontSize: 4,
|
22 | fontFamily: 'heading',
|
23 | fontWeight: 'heading',
|
24 | lineHeight: 'heading',
|
25 | }}
|
26 | />
|
27 | )
|
28 |
|
29 | export const Link = forwardRef((props, ref) =>
|
30 | <Box
|
31 | ref={ref}
|
32 | as='a'
|
33 | variant='link'
|
34 | {...props}
|
35 | />
|
36 | )
|
37 |
|
38 | export const Button = forwardRef((props, ref) =>
|
39 | <Box
|
40 | ref={ref}
|
41 | as='button'
|
42 | tx='buttons'
|
43 | variant='primary'
|
44 | {...props}
|
45 | __css={{
|
46 | appearance: 'none',
|
47 | display: 'inline-block',
|
48 | textAlign: 'center',
|
49 | lineHeight: 'inherit',
|
50 | textDecoration: 'none',
|
51 | fontSize: 'inherit',
|
52 | px: 3,
|
53 | py: 2,
|
54 | color: 'white',
|
55 | bg: 'primary',
|
56 | border: 0,
|
57 | borderRadius: 4,
|
58 | }}
|
59 | />
|
60 | )
|
61 |
|
62 | export const Image = forwardRef((props, ref) =>
|
63 | <Box
|
64 | ref={ref}
|
65 | as='img'
|
66 | {...props}
|
67 | __css={{
|
68 | maxWidth: '100%',
|
69 | height: 'auto',
|
70 | }}
|
71 | />
|
72 | )
|
73 |
|
74 | export const Card = forwardRef((props, ref) =>
|
75 | <Box
|
76 | ref={ref}
|
77 | variant='card'
|
78 | {...props}
|
79 | />
|
80 | )
|