lucid-ui
Version:
A UI component library from AppNexus.
41 lines (40 loc) • 1.91 kB
JavaScript
import React from 'react';
import createClass from 'create-react-class';
import { Grid } from '../../../index';
const gridStyle = {
half: { background: '#0089c4' },
quarter: { background: '#f7403a' },
third: { background: '#3fa516', color: '#f3f3f3' },
full: { background: '#333333', color: '#f3f3f3' },
auto: { background: '#999999', color: '#f3f3f3' },
flexdefault: { background: '#feb209' },
sharedStyles: {
margin: 0,
padding: 0,
color: '#f3f3f3',
},
vertical: { height: '100px' },
};
const fillCells = (count) => {
const cells = [];
for (let i = 0; i < count; i++) {
cells.push(React.createElement(Grid.Cell, { key: i },
React.createElement("p", { style: { ...gridStyle.auto, ...gridStyle.sharedStyles } }, "auto")));
}
return cells;
};
export default createClass({
render() {
return (React.createElement(Grid, { isGutterless: true, isMultiline: true },
React.createElement(Grid.Cell, { isHalf: true },
React.createElement("p", { style: { ...gridStyle.half, ...gridStyle.sharedStyles } }, "gutterless half")),
React.createElement(Grid.Cell, { style: { ...gridStyle.quarter, ...gridStyle.sharedStyles }, isQuarter: true }, "gutterless quarter"),
fillCells(1),
React.createElement(Grid.Cell, { isQuarter: true },
React.createElement("p", { style: { ...gridStyle.quarter, ...gridStyle.sharedStyles } }, "gutterless quarter")),
React.createElement(Grid.Cell, { isQuarter: true },
React.createElement("p", { style: { ...gridStyle.quarter, ...gridStyle.sharedStyles } }, "gutterless quarter")),
React.createElement(Grid.Cell, { isHalf: true },
React.createElement("p", { style: { ...gridStyle.half, ...gridStyle.sharedStyles } }, "gutterless half"))));
},
});