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