@dakingindanorf/hive/assets/widgets/bits-widget.js

A template for creating a nuxt generated static site using Netlify CMS to power the backend. Individual site components can be managed through Bit

import React from 'react'
import components from '../../bits/components/*/fields.json'

class bitsWidget extends React.Component {
    handleChange(e) {
        // const separator = this.props.field.get('widget', ', ')
        // this.props.onChange(e.target.value.split(separator).map(e => e.trim()))
    }

    printBits() {
        const bits = []
        components.forEach((bit, index) => {
            bits.push(React.createElement('div', { key: index, className: 'hive-admin__bit' },
                // React.createElement('h4', { key: index }, Object.values(bit.default)[0].label)
                React.createElement('h4', { key: index }, Object.values(bit.default)[0].fields.label)
            ))
        })
        return bits
    }

    render() {
        return React.createElement(
            'div',
            {
                id: this.props.forID,
                className: 'hive__admin',
                type: 'bits',
                onChange: this.handleChange
            },
            React.createElement('p', {}, 'For a blank component, simply fill out the component name and save. If you would like to copy and expand on an exising component, select the component below while also giving it a name.'),
            React.createElement('h2', {}, 'Component Name'),
            React.createElement('form', { className: 'hive-admin__form' },
                React.createElement('input', { className: 'hive-admin__input' }),
                React.createElement('button', { className: 'hive-admin__submit' }, 'Submit')
            ),
            React.createElement('h3', {}, 'Exisitng Components'),
            // React.createElement('h3', {}, JSON.stringify(components)),
            React.createElement('div', { className: 'hive-admin__bits' }, this.printBits())
        )
    }
}

class bitsPreview extends React.Component {
    render() {
        return React.createElement('div', {},
            components.map((bit, index) => {
                React.createElement('div', { key: index },
                    React.createElement('h4', { key: index }, bit.label))
            })
        )
    }
}

export {
    bitsWidget,
    bitsPreview
}