Frontastic component name

Footer

Page type

Can be used on all pages

Example images

Code samples

{
    "tasticType": "frontastic/footer",
    "name": "Footer",
    "icon": "list",
    "category": "Footer",
    "schema": [
        {
            "name": "Meta navigation",
            "fields": [
                {
                    "label": "Title",
                    "field": "title",
                    "type": "string"
                },
                {
                    "label": "Links",
                    "field": "links",
                    "type": "group",
                    "itemLabelField": "label",
                    "fields": [
                        {
                            "label": "Label",
                            "field": "label",
                            "type": "string"
                        },
                        {
                            "label": "Link",
                            "field": "reference",
                            "type": "reference"
                        }
                    ]
                }
            ]
        },
        {
            "name": "Help and information links",
            "fields": [
                {
                    "label": "Header",
                    "field": "infoHeader",
                    "type": "string"
                },
                {
                    "label": "Header icon",
                    "field": "infoHeaderIcon",
                    "type": "enum",
                    "required": false,
                    "values": [
                        {
                            "value": "help",
                            "name": "Help"
                        },
                        {
                            "value": "chat",
                            "name": "Chat"
                        },
                        {
                            "value": "announcement",
                            "name": "Announcement"
                        }
                    ]
                },
                {
                    "label": "Links",
                    "field": "infoLinks",
                    "type": "group",
                    "itemLabelField": "label",
                    "fields": [
                        {
                            "label": "Label",
                            "field": "label",
                            "type": "string"
                        },
                        {
                            "label": "Link",
                            "field": "reference",
                            "type": "reference"
                        }
                    ]
                }
            ]
        },
        {
            "name": "Contact info",
            "fields": [
                {
                    "label": "Header",
                    "field": "contactHeader",
                    "type": "string"
                },
                {
                    "label": "Phone number",
                    "field": "phoneNumber",
                    "type": "string"
                },
                {
                    "label": "Phone number subline",
                    "field": "phoneNumberSubline",
                    "type": "string"
                },
                {
                    "label": "Email",
                    "field": "email",
                    "type": "string"
                },
                {
                    "label": "Email overline",
                    "field": "emailOverline",
                    "type": "string"
                }
            ]
        },
        {
            "name": "About Links",
            "fields": [
                {
                    "label": "About header",
                    "field": "aboutHeader",
                    "type": "string"
                },
                {
                    "label": "Header icon",
                    "field": "aboutHeaderIcon",
                    "type": "enum",
                    "required": false,
                    "values": [
                        {
                            "value": "help",
                            "name": "Help"
                        },
                        {
                            "value": "chat",
                            "name": "Chat"
                        },
                        {
                            "value": "announcement",
                            "name": "Announcement"
                        }
                    ]
                },
                {
                    "label": "Links",
                    "field": "aboutLinks",
                    "type": "group",
                    "itemLabelField": "label",
                    "fields": [
                        {
                            "label": "Label",
                            "field": "label",
                            "type": "string"
                        },
                        {
                            "label": "Link",
                            "field": "reference",
                            "type": "reference"
                        }
                    ]
                }
            ]
        },
        {
            "name": "Payment methods",
            "fields": [
                {
                    "label": "Payment methods",
                    "field": "paymentMethods",
                    "type": "group",
                    "itemLabelField": "icon",
                    "fields": [
                        {
                            "label": "Icon",
                            "field": "playmentIcon",
                            "type": "enum",
                            "values": [
                                {
                                    "name": "PayPal",
                                    "value": "paypal"
                                },
                                {
                                    "name": "Visa",
                                    "value": "visa"
                                },
                                {
                                    "name": "Mastercard",
                                    "value": "mastercard"
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}
import React from 'react'
import PropTypes from 'prop-types'
import tastify from '@frontastic/catwalk/src/js/helper/tastify'
import Footer from '../../patterns/molecules/Footer'

function MetaNavTastic ({
    data: {
        title,
        links,
        infoHeader,
        infoHeaderIcon,
        infoLinks,
        aboutHeader,
        aboutHeaderIcon,
        aboutLinks,
        contactHeader,
        phoneNumber,
        phoneNumberSubline,
        email,
        emailOverline,
        paymentMethods,
        paymentHeader,
    },
}) {
    return (
        <Footer
            title={title}
            links={links}
            infoHeader={infoHeader}
            infoHeaderIcon={infoHeaderIcon}
            infoLinks={infoLinks}
            aboutHeader={aboutHeader}
            aboutHeaderIcon={aboutHeaderIcon}
            aboutLinks={aboutLinks}
            contactHeader={contactHeader}
            phoneNumber={phoneNumber}
            phoneNumberSubline={phoneNumberSubline}
            email={email}
            emailOverline={emailOverline}
            paymentMethods={paymentMethods}
            paymentHeader={paymentHeader}
        />
    )
}

MetaNavTastic.propTypes = {
    data: PropTypes.object.isRequired,
}

export default tastify({ translate: true })(MetaNavTastic)

Did this page help you?