lucid-ui
Version:
A UI component library from AppNexus.
74 lines (73 loc) • 3.8 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("div", null,
React.createElement(Grid, null,
React.createElement(Grid.Cell, { isFull: true },
React.createElement("p", { style: { ...gridStyle.full, ...gridStyle.sharedStyles } }, "full"))),
React.createElement(Grid, null,
React.createElement(Grid.Cell, { is2: true },
React.createElement("p", { style: { ...gridStyle.flexdefault, ...gridStyle.sharedStyles } }, "2")),
fillCells(12 - 2)),
React.createElement(Grid, null,
React.createElement(Grid.Cell, { is3: true },
React.createElement("p", { style: { ...gridStyle.flexdefault, ...gridStyle.sharedStyles } }, "3")),
fillCells(12 - 3)),
React.createElement(Grid, null,
React.createElement(Grid.Cell, { is4: true },
React.createElement("p", { style: { ...gridStyle.flexdefault, ...gridStyle.sharedStyles } }, "4")),
fillCells(12 - 4)),
React.createElement(Grid, null,
React.createElement(Grid.Cell, { is5: true },
React.createElement("p", { style: { ...gridStyle.flexdefault, ...gridStyle.sharedStyles } }, "5")),
fillCells(12 - 5)),
React.createElement(Grid, null,
React.createElement(Grid.Cell, { is6: true },
React.createElement("p", { style: { ...gridStyle.flexdefault, ...gridStyle.sharedStyles } }, "6")),
fillCells(12 - 6)),
React.createElement(Grid, null,
React.createElement(Grid.Cell, { is7: true },
React.createElement("p", { style: { ...gridStyle.flexdefault, ...gridStyle.sharedStyles } }, "7")),
fillCells(12 - 7)),
React.createElement(Grid, null,
React.createElement(Grid.Cell, { is8: true },
React.createElement("p", { style: { ...gridStyle.flexdefault, ...gridStyle.sharedStyles } }, "8")),
fillCells(12 - 8)),
React.createElement(Grid, null,
React.createElement(Grid.Cell, { is9: true },
React.createElement("p", { style: { ...gridStyle.flexdefault, ...gridStyle.sharedStyles } }, "9")),
fillCells(12 - 9)),
React.createElement(Grid, null,
React.createElement(Grid.Cell, { is10: true },
React.createElement("p", { style: { ...gridStyle.flexdefault, ...gridStyle.sharedStyles } }, "10")),
fillCells(12 - 10)),
React.createElement(Grid, null,
React.createElement(Grid.Cell, { is11: true },
React.createElement("p", { style: { ...gridStyle.flexdefault, ...gridStyle.sharedStyles } }, "11")),
fillCells(12 - 11))));
},
});