jobiqo-cl
Version:
[](https://circleci.com/gh/jobiqo/jobiqo-cl)
44 lines (41 loc) • 1.63 kB
JavaScript
import { __rest } from '../../../../../node_modules/tslib/tslib.es6.js';
import React__default from 'react';
import styled from 'styled-components';
import { space } from '../../../../../node_modules/@styled-system/space/dist/index.esm.js';
import { gridGap, gridAutoFlow, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridAutoColumns, gridAutoRows, alignItems, justifyContent, justifyItems, width, height, textAlign } from '../../../../../node_modules/styled-system/dist/index.esm.js';
import { columnsProp } from './props/columns.js';
/**
* @file index.tsx.
*
* @fileoverview Component that maps directly to CSS grid properties using styled-system. Based on grid-layout for
* styled-system https://styled-system.com/api/#grid-layout
*/
const StyledGrid = styled.div `
display: grid;
${gridGap};
${gridAutoFlow};
${gridTemplateColumns};
${gridTemplateRows};
${gridTemplateAreas};
${gridAutoColumns};
${gridAutoRows};
${alignItems};
${justifyContent};
${justifyItems};
${width};
${height};
${space};
${textAlign};
${columnsProp};
`;
/**
* A Grid allows for displaying information in columns and rows next to each other.
* All properties can accept an array for responsive values. Inside Grids there should be "Cell" components which also have
* specific properties for mapping to CSS Grid properties.
*/
const Grid = (_a) => {
var { children, gridGap = 6 } = _a, props = __rest(_a, ["children", "gridGap"]);
return (React__default.createElement(StyledGrid, Object.assign({ gridGap: gridGap }, props), children));
};
export default Grid;
export { Grid };