git.iko.soy/bridge
on 4e46b53 help sign in
bridge/src/indigo-react/components/Grid.js
78 lines 1.5 kB history raw
1import React from 'react';
2import cn from 'classnames';
4const Grid = React.forwardRef(function Grid(
5 {
6 as: As = 'div',
7 gap = 0,
8 asFlex = false,
9 align,
10 justify,
11 className,
12 ...rest
13 },
14 ref
15) {
16 return (
17 <As
18 ref={ref}
19 className={cn(
20 asFlex ? 'flex' : 'grid12',
21 gap && `gap${gap}`,
22 {
23 [`justify-${justify}`]: justify,
24 [`align-${align}`]: align,
25 },
26 className
27 )}
28 {...rest}
29 />
30 );
31});
33Grid.Item = React.forwardRef(function GridItem(
34 {
35 as: As = 'div',
36 full = false,
37 half = 0,
38 third = 0,
39 fourth = 0,
40 rows = [],
41 cols = [],
42 justifySelf,
43 alignSelf,
44 className,
45 ...rest
46 },
47 ref
48) {
49 return (
50 <As
51 ref={ref}
52 className={cn(
53 {
54 full,
55 [`half-${half}`]: half,
56 [`third-${third}`]: third,
57 [`fourth-${fourth}`]: fourth,
58 },
59 {
60 [`r${rows[0]}-${rows[1]}`]: rows.length === 2,
61 [`c${cols[0]}-${cols[1]}`]: cols.length === 2,
62 },
63 {
64 [`justify-self-${justifySelf}`]: justifySelf,
65 [`align-self-${alignSelf}`]: alignSelf,
66 },
67 className
68 )}
69 {...rest}
70 />
71 );
72});
74Grid.Divider = function GridDivider({ color = 'gray2', className, ...rest }) {
75 return <div className={cn('full', `bt1 b-${color}`, className)} {...rest} />;
76};
78export default Grid;