@gechiui/components/build-module/ui/__storybook-utils/example-grid.js

UI components for GeChiUI.

import { createElement } from "@gechiui/element";

/**
 * Internal dependencies
 */
import { Grid } from '../../grid';
import { Surface } from '../../surface';
import { Text } from '../../text';
import { View } from '../../view';
import { VStack } from '../../v-stack';

const Container = _ref => {
  let {
    children
  } = _ref;
  return createElement("div", {
    style: {
      maxWidth: 1280,
      width: '100%',
      marginLeft: 'auto',
      marginRight: 'auto'
    }
  }, children);
};

export const ExampleGrid = _ref2 => {
  let {
    children
  } = _ref2;
  return createElement(Container, null, createElement(Grid, {
    columns: [2, 2, 4],
    gap: "1px"
  }, children));
};
export const ExampleGridItem = _ref3 => {
  let {
    children
  } = _ref3;
  return createElement(Surface, {
    variant: "secondary",
    style: {
      padding: 20
    }
  }, createElement(VStack, {
    alignment: "center"
  }, children));
};
export const ExampleMetaContent = _ref4 => {
  let {
    title,
    items = []
  } = _ref4;
  return createElement(Grid, {
    templateColumns: "60px 1fr"
  }, createElement(View, null, createElement(Text, {
    size: "caption",
    weight: "bold",
    align: "right",
    isBlock: true
  }, title)), createElement(VStack, {
    spacing: 1
  }, items.map((item, index) => createElement(View, {
    key: index
  }, createElement(Text, {
    size: "caption",
    isBlock: true
  }, item)))));
};
//# sourceMappingURL=example-grid.js.map