UNPKG

@dotconnor/grommet

Version:

focus on the essential experience

31 lines 939 B
import React, { useContext } from 'react'; import { grommet, Box, Card, Grid, Grommet, ResponsiveContext, Text } from 'grommet'; var cards = Array(20).fill() // eslint-disable-next-line react/no-array-index-key .map(function (_, i) { return /*#__PURE__*/React.createElement(Text, { key: i }, "Card " + i); }); export var Example = function Example() { var size = useContext(ResponsiveContext); return /*#__PURE__*/React.createElement(Grommet, { theme: grommet }, /*#__PURE__*/React.createElement(Box, { pad: "large" }, /*#__PURE__*/React.createElement(Grid, { columns: size !== 'small' ? 'small' : '100%', gap: "small" }, cards.map(function (card, index) { return ( /*#__PURE__*/ // eslint-disable-next-line react/no-array-index-key React.createElement(Card, { pad: "large", key: index }, card) ); })))); }; Example.story = { name: 'Responsive cards' };