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