git.iko.soy/bridge
on fb6d07a help sign in
bridge/src/indigo-react/components/Grid.js
60 lines 1.2 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({ vertical = false, className, ...rest }) {
48 return (
49 <div
50 style={{
51 height: vertical ? 'auto' : '1px',
52 width: vertical ? '1px' : 'auto',
53 }}
54 className={cn('full', className || 'bg-gray2')}
55 {...rest}
56 />
57 );
58};
60export default Grid;