Horizontal spacer

Frontastic component name

Horizontal spacer

Page type

Can be used on all pages

Example images

Code samples

{
    "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": ""
                }
            ]
        }
    ]
}
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`,
            }}
        />
    )
}

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

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

Did this page help you?