Horizontal spacer Tastic

Tastic name:

Horizontal spacer

Page type:

All pages

Example image:

Schema.json:

{
    "tasticType": "frontastic/helpers/horizontal-spacer",
    "name": "Horizontal Spacer",
    "category": "Helpers",
    "icon": "photo_size_select_small",
    "schema": [
        {
            "name": "Space Size",
            "fields": [
                {
                    "label": "Size",
                    "field": "size",
                    "type": "enum",
                    "required": false,
                    "values": [
                        {
                            "value": "xxs",
                            "name": "Extra Extra Small (4px)"
                        },
                        {
                            "value": "xs",
                            "name": "Extra Small (8px)"
                        },
                        {
                            "value": "sm",
                            "name": "Small (12px)"
                        },
                        {
                            "value": "md",
                            "name": "Medium (16px)"
                        },
                        {
                            "value": "lg",
                            "name": "Large (20px)"
                        },
                        {
                            "value": "xl",
                            "name": "Extra Large (24px)"
                        }
                    ],
                    "default": "xl"
                },
                {
                    "label": "Space in px (Overrides Size field)",
                    "field": "spaceInPx",
                    "type": "integer",
                    "default": ""
                }
            ]
        }
    ]
}

Tastic.jsx: import React from 'react' import PropTypes from 'prop-types' import tastify from '@frontastic/catwalk/src/js/helper/tastify' const SIZE_MAP = { xxs: '4', xs: '8', sm: '12', md: '16', lg: '20', xl: '24', } const HorizontalSpacerTastic = ({ data }) => { const size = data.size || 'xl' const spaceInPx = data.spaceInPx || SIZE_MAP[size] return ( <div className="horisontal-spacer-tastic" style="{{" width: '100%', height: `${spaceInPx}px`, }}></div> ) } HorizontalSpacerTastic.propTypes = { data: PropTypes.object.isRequired, } export default tastify({ translate: true })(HorizontalSpacerTastic)

---