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