git.iko.soy/bridge
on 7f63306 help sign in
bridge/src/indigo-react/components/Grid.js
61 lines 1.2 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 className,
25 ...rest
26}) {
27 const Component = getComponent(as);
28 return (
29 <Component
30 className={cn(
31 {
32 full,
33 [`half-${half}`]: half,
34 [`third-${third}`]: third,
35 [`fourth-${fourth}`]: fourth,
36 },
37 {
38 [`r${rows[0]}-${rows[1]}`]: rows.length === 2,
39 [`c${cols[0]}-${cols[1]}`]: cols.length === 2,
40 },
41 className
42 )}
43 {...rest}
44 />
45 );
46};
48Grid.Divider = function GridDivider({ vertical = false, className, ...rest }) {
49 return (
50 <div
51 style={{
52 height: vertical ? 'auto' : '1px',
53 width: vertical ? '1px' : 'auto',
54 }}
55 className={cn('full', className || 'bg-gray2')}
56 {...rest}
57 />
58 );
59};
61export default Grid;