Footer

{
  "tasticType": "commercetools/ui/footer",
  "name": "commercetools UI footer",
  "icon": "menu",
  "category": "Header and footer",
  "schema": [
    {
      "name": "Nav Column 1",
      "fields": [
        {
          "type": "description",
          "text": "Ideally 3-6 links"
        },
        {
          "label": "Header",
          "field": "headerCol1",
          "translatable": true,
          "required": true,
          "type": "string"
        },
        {
          "label": "Links",
          "field": "linksCol1",
          "type": "group",
          "itemLabelField": "name",
          "fields": [
            {
              "label": "Name",
              "field": "name",
              "translatable": true,
              "required": true,
              "type": "string"
            },
            {
              "label": "Link",
              "field": "reference",
              "required": true,
              "type": "reference"
            }
          ]
        },
        {
          "label": "Icon",
          "field": "icon",
          "type": "enum",
          "default": "rocket",
          "values": [
            {
              "name": "Rocket",
              "value": "rocket"
            },
            {
              "name": "Loop",
              "value": "loop"
            },
            {
              "name": "Lock",
              "value": "lock"
            },
            {
              "name": "Question Mark",
              "value": "question"
            },
            {
              "name": "Inbox",
              "value": "inbox"
            },
            {
              "name": "Speaker",
              "value": "speaker"
            }
          ]
        }
      ]
    },
    {
      "name": "Nav Column 2",
      "fields": [
        {
          "type": "description",
          "text": "Ideally 3-6 links"
        },
        {
          "label": "Header",
          "field": "headerCol2",
          "translatable": true,
          "required": true,
          "type": "string"
        },
        {
          "label": "Links",
          "field": "linksCol2",
          "type": "group",
          "itemLabelField": "name",
          "fields": [
            {
              "label": "Name",
              "field": "name",
              "translatable": true,
              "required": true,
              "type": "string"
            },
            {
              "label": "Link",
              "field": "reference",
              "required": true,
              "type": "reference"
            }
          ]
        },
        {
          "label": "Icon",
          "field": "icon",
          "type": "enum",
          "default": "rocket",
          "values": [
            {
              "name": "Rocket",
              "value": "rocket"
            },
            {
              "name": "Loop",
              "value": "loop"
            },
            {
              "name": "Lock",
              "value": "lock"
            },
            {
              "name": "Question Mark",
              "value": "question"
            },
            {
              "name": "Inbox",
              "value": "inbox"
            },
            {
              "name": "Speaker",
              "value": "speaker"
            }
          ]
        }
      ]
    },
    {
      "name": "Nav Column 3",
      "fields": [
        {
          "type": "description",
          "text": "Ideally 3-6 links"
        },
        {
          "label": "Header",
          "field": "headerCol3",
          "translatable": true,
          "required": true,
          "type": "string"
        },
        {
          "label": "Links",
          "field": "linksCol3",
          "type": "group",
          "itemLabelField": "name",
          "fields": [
            {
              "label": "Name",
              "field": "name",
              "translatable": true,
              "required": true,
              "type": "string"
            },
            {
              "label": "Link",
              "field": "reference",
              "required": true,
              "type": "reference"
            }
          ]
        },
        {
          "label": "Icon",
          "field": "icon",
          "type": "enum",
          "default": "rocket",
          "values": [
            {
              "name": "Rocket",
              "value": "rocket"
            },
            {
              "name": "Loop",
              "value": "loop"
            },
            {
              "name": "Lock",
              "value": "lock"
            },
            {
              "name": "Question Mark",
              "value": "question"
            },
            {
              "name": "Inbox",
              "value": "inbox"
            },
            {
              "name": "Speaker",
              "value": "speaker"
            }
          ]
        }
      ]
    },
    {
      "name": "Nav Column 4",
      "fields": [
        {
          "type": "description",
          "text": "Ideally 3-6 links"
        },
        {
          "label": "Header",
          "field": "headerCol4",
          "translatable": true,
          "required": true,
          "type": "string"
        },
        {
          "label": "Links",
          "field": "linksCol4",
          "type": "group",
          "itemLabelField": "name",
          "fields": [
            {
              "label": "Name",
              "field": "name",
              "translatable": true,
              "required": true,
              "type": "string"
            },
            {
              "label": "Link",
              "field": "reference",
              "required": true,
              "type": "reference"
            }
          ]
        },
        {
          "label": "Icon",
          "field": "icon",
          "type": "enum",
          "default": "rocket",
          "values": [
            {
              "name": "Rocket",
              "value": "rocket"
            },
            {
              "name": "Loop",
              "value": "loop"
            },
            {
              "name": "Lock",
              "value": "lock"
            },
            {
              "name": "Question Mark",
              "value": "question"
            },
            {
              "name": "Inbox",
              "value": "inbox"
            },
            {
              "name": "Speaker",
              "value": "speaker"
            }
          ]
        }
      ]
    },
    {
      "name": "Copyright",
      "fields": [
        {
          "label": "Copyright",
          "field": "copyright",
          "translatable": false,
          "required": false,
          "type": "string"
        },
        {
          "label": "Links",
          "field": "copyrightLinks",
          "type": "group",
          "fields": [
            {
              "label": "Copyright",
              "field": "name",
              "translatable": true,
              "required": false,
              "type": "string"
            },
            {
              "label": "Link",
              "field": "reference",
              "required": true,
              "type": "reference"
            }
          ]
        }
      ]
    }
  ]
}

import React from 'react';
import Footer from 'components/commercetools-ui/footer';
import Highlights from 'components/commercetools-ui/footer/highlights';

const FooterTastic = ({ data }) => {
  const columns = [
    {
      header: data.headerCol1,
      links: data.linksCol1,
      icon: data.iconCol1,
    },
    {
      header: data.headerCol2,
      links: data.linksCol2,
      icon: data.iconCol2,
    },
    {
      header: data.headerCol3,
      links: data.linksCol3,
      icon: data.iconCol3,
    },
  ];

  return (
    <div className="fixed-screen-width lg:relative-width">
      <Highlights />
      <Footer columns={columns} copyright={data.copyright} copyrightLinks={data.copyrightLinks} />
    </div>
  );
};

export default FooterTastic;