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