Tile

{
  "tasticType": "commercetools/ui/content/tile",
  "name": "commercetools UI tile",
  "icon": "image",
  "category": "Content",
  "schema": [
    {
      "name": "Image",
      "helpText": "Customize your image",
      "fields": [
        {
          "label": "Image",
          "field": "image",
          "type": "media",
          "required": true
        }
      ]
    },
    {
      "name": "Message",
      "helpText": "Customize your tile message",
      "fields": [
        {
          "label": "Title",
          "field": "title",
          "type": "string",
          "translatable": true,
          "required": false
        },
        {
          "label": "Subtitle",
          "field": "subtitle",
          "type": "string",
          "translatable": true,
          "required": false
        }
      ]
    },
    {
      "name": "Call to action",
      "helpText": "Customize your call to action",
      "fields": [
        {
          "label": "Button label",
          "field": "ctaLabel",
          "translatable": true,
          "type": "string",
          "required": false,
          "default": ""
        },
        {
          "label": "Link",
          "field": "ctaReference",
          "translatable": false,
          "required": false,
          "type": "reference",
          "default": null
        }
      ]
    }
  ]
}

import React from 'react';
import Tile from 'components/commercetools-ui/content/tile';

const TileTastic = ({ data }) => {
  return (
    <Tile
      image={data.image}
      title={data.title}
      subtitle={data.subtitle}
      ctaLabel={data.ctaLabel}
      ctaReference={data.ctaReference}
    />
  );
};

export default TileTastic;