git.iko.soy/bridge
on abbbcbc help sign in
bridge/src/indigo-react/components/Grid.js
84 lines 1.5 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({
67 vertical = false,
68 color = 'gray2',
69 className,
70 ...rest
71}) {
72 return (
73 <div
74 style={{
75 height: vertical ? 'auto' : '1px',
76 width: vertical ? '1px' : 'auto',
77 }}
78 className={cn('full', `bg-${color}`, className)}
79 {...rest}
80 />
81 );
82};
84export default Grid;