Spacer

{
  "tasticType": "commercetools/ui/content/spacer",
  "name": "commercetools UI spacer",
  "category": "Content",
  "icon": "favorite",
  "schema": [
    {
      "name": "Configuration",
      "fields": [
        {
          "label": "Value",
          "field": "variant",
          "type": "enum",
          "values": [
            {
              "name": "Small",
              "value": "sm"
            },
            {
              "name": "Medium",
              "value": "md"
            },
            {
              "name": "Large",
              "value": "lg"
            }
          ]
        },
        {
          "type": "description",
          "text": "Or specify custom spacing in pixels."
        },
        {
          "label": "Custom (Mobile-Tablet)",
          "field": "customMobile",
          "type": "number"
        },
        {
          "label": "Custom (Desktop)",
          "field": "customDesktop",
          "type": "number"
        }
      ]
    }
  ]
}

import React from 'react';
import Spacer, {
  SpacerProps,
} from 'components/commercetools-ui/content/spacer';

export type Props = {
  data: SpacerProps;
};

const SpacerTastic: React.FC<Props> = ({ data }) => {
  return <Spacer {...data} />;
};

export default SpacerTastic;