Frontastic component name

Tile

Page type

Can be used on all pages

Example images

Code samples

{
    "tasticType": "frontastic/content/tile",
    "name": "Tile",
    "category": "Content",
    "icon": "image",
    "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": "Topic",
                    "field": "topic",
                    "type": "string",
                    "default": ""
                },
                {
                    "label": "Title",
                    "field": "title",
                    "type": "string",
                    "default": ""
                }
            ]
        },
        {
            "name": "Message placement",
            "helpText": "Choose the placement of the component",
            "fields": [
                {
                    "label": "Vertical position",
                    "field": "verticalPosition",
                    "type": "enum",
                    "required": false,
                    "default": "bottom",
                    "values": [
                        {
                            "value": "top",
                            "name": "Top"
                        },
                        {
                            "value": "middle",
                            "name": "Middle"
                        },
                        {
                            "value": "bottom",
                            "name": "Bottom"
                        }
                    ]
                },
                {
                    "label": "Horizontal position",
                    "field": "horizontalPosition",
                    "type": "enum",
                    "required": false,
                    "default": "left",
                    "values": [
                        {
                            "value": "left",
                            "name": "Left"
                        },
                        {
                            "value": "center",
                            "name": "Center"
                        },
                        {
                            "value": "right",
                            "name": "Right"
                        }
                    ]
                }
            ]
        },
        {
            "name": "Button",
            "helpText": "Customize your button",
            "fields": [
                {
                    "label": "Button label",
                    "field": "buttonLabel",
                    "translatable": true,
                    "type": "string",
                    "required": false,
                    "default": ""
                },
                {
                    "label": "Link",
                    "field": "reference",
                    "required": false,
                    "type": "reference",
                    "default": null
                },
                {
                    "label": "Whole tile clickable",
                    "field": "isClickable",
                    "type": "boolean",
                    "default": false
                }
            ]
        }
    ]
}
import React, { FunctionComponent } from 'react'
import { connect } from 'react-redux'

import { Tastic } from '@frontastic/catwalk/src/js/types/frontend'
import tastify from '@frontastic/catwalk/src/js/helper/tastify'
import Tile from '../../../patterns/molecules/Tile'

export interface TileTasticData {
     image?: any;
     topic: string;
     title: string;
     verticalPosition: string;
     horizontalPosition: string;
     buttonLabel: string;
     reference: any;
     isClickable: boolean;
}

export interface Props {
    tastic: Tastic,
    data: TileTasticData,
}

export const TileTastic: FunctionComponent<Props> = ({ data, tastic }: Props) => {
    return (
        <Tile
            image={data.image}
            topic={data.topic}
            title={data.title}
            verticalPosition={data.verticalPosition}
            horizontalPosition={data.horizontalPosition}
            buttonLabel={data.buttonLabel}
            reference={data.reference}
            isClickable={data.isClickable}
        />
    )
}

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

Did this page help you?