Gutenberg inspector controls for Countdown block

/**
 * Internal block libraries
 */
const { __ } = wp.i18n;
const { Component } = wp.element;
const {
    InspectorControls,
    ColorPalette,
} = wp.editor;
const {
    Button,
    PanelBody,
    PanelColor,
    TextControl,
    SelectControl,
    RangeControl,
} = wp.components;


/**
 * Create an Inspector Controls wrapper Component
 */
export default class Inspector extends Component {

    constructor() {
        super( ...arguments );
    }

    render() {
        const { attributes: { uniqueID, style, date, textBgColor, numberBgColor, textColor, numberColor, borderColor, colonColor }, setAttributes } = this.props;

        return [
            <InspectorControls>
                <PanelBody>
                    <TextControl
                        label={ __( 'Unique Number', 'prefixx' ) }
                        help={ __( 'Please provide a unique number for this block. Ex: 1/23/500 etc (any number) Otherwise the styles you apply will not work properly.', 'prefixx' ) }
                        value={ uniqueID }
                        onChange={ uniqueID => setAttributes( { uniqueID } ) }
                    />
                    <TextControl
                        label={ __( 'Date', 'prefixx' ) }
                        help={ __( 'Please put your date like this example: 2020/08/25 (Y/M/D)', 'prefixx' ) }
                        value={ date }
                        onChange={ date => setAttributes( { date } ) }
                    />
                    <SelectControl
                        label={ __( 'Style', 'prefixx' ) }
                        value={ style }
                        options={ [
                            { value: '1',         label: ' Style 1'},
                            { value: '2',         label: ' Style 2'},
                            { value: '3',         label: ' Style 3'},
                            { value: '4',         label: ' Style 4'},
                            { value: '5',         label: ' Style 5'},
                            { value: '6',         label: ' Style 6'},
                            { value: '7',         label: ' Style 7'},
                        ]}
                        onChange={ style => setAttributes( { style } ) }
                    />
                    <PanelColor
                        title={ __( 'Text Bg Color', 'prefixx' ) }
                        colorValue={ textBgColor }
                        initialOpen={ false }
                    >
                        <ColorPalette
                            value={ textBgColor }
                            onChange={ textBgColor => setAttributes( { textBgColor } ) }
                        />
                    </PanelColor>
                    <PanelColor
                        title={ __( 'Number Bg Color', 'prefixx' ) }
                        colorValue={ numberBgColor }
                        initialOpen={ false }
                    >
                        <ColorPalette
                            value={ numberBgColor }
                            onChange={ numberBgColor => setAttributes( { numberBgColor } ) }
                        />
                    </PanelColor>
                    <PanelColor
                        title={ __( 'Text Color', 'prefixx' ) }
                        colorValue={ textColor }
                        initialOpen={ false }
                    >
                        <ColorPalette
                            value={ textColor }
                            onChange={ textColor => setAttributes( { textColor } ) }
                        />
                    </PanelColor>
                    <PanelColor
                        title={ __( 'Number Color', 'prefixx' ) }
                        colorValue={ numberColor }
                        initialOpen={ false }
                    >
                        <ColorPalette
                            value={ numberColor }
                            onChange={ numberColor => setAttributes( { numberColor } ) }
                        />
                    </PanelColor>
                    <PanelColor
                        title={ __( 'Border Color', 'prefixx' ) }
                        colorValue={ borderColor }
                        initialOpen={ false }
                    >
                        <ColorPalette
                            value={ borderColor }
                            onChange={ borderColor => setAttributes( { borderColor } ) }
                        />
                    </PanelColor>
                    <PanelColor
                        title={ __( 'Colon Color', 'prefixx' ) }
                        colorValue={ colonColor }
                        initialOpen={ false }
                    >
                        <ColorPalette
                            value={ colonColor }
                            onChange={ colonColor => setAttributes( { colonColor } ) }
                        />
                    </PanelColor>
                </PanelBody>
            </InspectorControls>
        ];
    }
}