@cdc/core 1.1.4 → 9.22.9

package/components/elements/Button.jsx

@@ -1,12 +1,131 @@
-import React from 'react'
+import React, { useState, useEffect, useRef } from 'react'
+import PropTypes from 'prop-types'
+
+import LoadSpin from '../ui/LoadSpin'
 
 import '../../styles/v2/components/button.scss'
 
-const Button = ({fluid, children, onClick, className, ...attributes}) => {
+const Button = ({
+                  style,
+                  role,
+                  hoverStyle = {},
+                  fluid = false,
+                  loading = false,
+                  loadingText = "Loading...",
+                  flexCenter,
+                  active = false,
+                  onClick,
+                  children, ...attributes
+                }) => {
+
+  const buttonRef = useRef(null)
+
+  const [ buttonState, setButtonState ] = useState('out')
+  const [ customStyles, setCustomStyles ] = useState({ ...style })
+  const [ childrenWidth, setChildrenWidth ] = useState()
+  const [ loadtextWidth, setLoadtextWidth ] = useState()
+
+  const attributesObj = {
+    ...attributes,
+    style: customStyles,
+    className:
+      'cove-button' +
+      (flexCenter || 'loader' === role ? ' cove-button--flex-center' : '') +
+      (fluid ? ' fluid' : '') +
+      (loading ? ' loading' : '') +
+      (attributes.className ? ' ' + attributes.className : ''),
+    onMouseOver: () => setButtonState('in'),
+    onMouseOut: () => setButtonState('out'),
+    onFocus: () => setButtonState('in'),
+    onBlur: () => setButtonState('out')
+  }
+
+  useEffect(() => {
+    if ('loader' === role && buttonRef.current) {
+      //Create ghost object and text nodes for children
+      const ghostSpan = document.createElement('span')
+      const ghostContent = document.createTextNode(children)
+      ghostSpan.style.opacity = '0'
+      ghostSpan.style.visibility = 'hidden'
+
+      //Create ghost object and text nodes for loading value
+      const ghostLoaderSpan = document.createElement('span')
+      const ghostLoaderContent = document.createTextNode(loadingText)
+      ghostLoaderSpan.style.opacity = '0'
+      ghostLoaderSpan.style.visibility = 'hidden'
+
+      //Append data to ghost objects
+      ghostSpan.appendChild(ghostContent)
+      ghostLoaderSpan.appendChild(ghostLoaderContent)
+
+      //Append objects to document
+      buttonRef.current.parentNode.insertBefore(ghostSpan, buttonRef.current)
+      buttonRef.current.parentNode.insertBefore(ghostLoaderSpan, buttonRef.current)
+
+      //Register ghost width values in state
+      setChildrenWidth(ghostSpan.offsetWidth + 2) //Toss in a 2px to account for subpixel offset
+      setLoadtextWidth(ghostLoaderSpan.offsetWidth + 2) //Toss in a 2px to account for subpixel offset
+
+      //Remove ghost objects form document
+      buttonRef.current.parentNode.removeChild(ghostSpan)
+      buttonRef.current.parentNode.removeChild(ghostLoaderSpan)
+    }
+  }, [])
+
+  useEffect(() => {
+    //Adjust button styles depending on cursor, focus, and active, states
+    return buttonState === 'in'
+      ? setCustomStyles(stateStyles => ({ ...stateStyles, ...hoverStyle }))
+      : buttonState === 'out'
+        ? active //If button state is out, check if its 'active'; we want to keep hover styles applied to 'active' buttons
+          ? null //Button is active, so leave the 'hover' styles in place
+          : setCustomStyles({ ...style }) //Button is not 'active', so reset display styles back to default
+        : false //Button state is neither 'in' nor 'out' - do nothing
+  }, [ buttonState, active ])
 
   return (
-    <button className={`cove-button${fluid ? ' fluid' : ''}${className ? className : ''}`} {...attributes} onClick={(e) => {e.preventDefault(); onClick();}}>{children}</button>
+    <button {...attributesObj}
+            onClick={(e) => {
+              e.preventDefault()
+              return loading || onClick()
+            }}
+            disabled={loading || attributesObj.disabled}
+            ref={buttonRef}>
+      {children &&
+        <>
+          {'loader' === role &&
+            <>
+              <span className="cove-button__text" style={loading ? { width: loadtextWidth + 'px' } : { width: childrenWidth + 'px' }}>
+                <div className="cove-button__text--loading" style={loading ? { opacity: 1 } : null}>{loadingText}</div>
+                <div className="cove-button__text--children" style={loading ? { opacity: 0 } : null}>{children}</div>
+              </span>
+              <div className="cove-button__load-spin" style={loading ? { width: '28px', opacity: 1 } : null}>
+                <LoadSpin className="ml-1" size={20}/>
+              </div>
+            </>
+          }
+          {role !== 'loader' && children}
+        </>
+      }
+    </button>
   )
 }
 
+Button.propTypes = {
+  /** Specify special role type for button */
+  role: PropTypes.oneOf([ 'loader' ]),
+  /** Provide object with styles that overwrite base styles when hovered */
+  hoverStyle: PropTypes.object,
+  /** Enables button to stretch to the full width of the content */
+  fluid: PropTypes.bool,
+  /** Displays loading spinner on button while condition is true **/
+  loading: PropTypes.bool,
+  /** Set text to appear during loading animation **/
+  loadingText: PropTypes.string,
+  /** Displays button as flex and centers all direct children nodes. Useful for aligning icons and text **/
+  flexCenter: PropTypes.bool,
+  /** When value condition is true, retains any custom, inline `style={}` defined **/
+  active: PropTypes.bool
+}
+
 export default Button

package/components/elements/Card.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+import '../../styles/v2/components/card.scss'
+
+const Card = ({children, className, ...attributes}) => {
+  return (
+    <div className={`cove-card${className ? ' ' + className : ''}`} {...attributes}>
+      {children}
+    </div>
+  )
+}
+
+export default Card

package/components/inputs/InputCheckbox.jsx

@@ -1,12 +1,13 @@
 import React, { useState, useEffect, memo } from 'react'
+import PropTypes from 'prop-types'
 
-import Check from '../../assets/check.svg'
-import '../../styles/v2/components/input.scss'
+import Check from '../../assets/icon-check.svg'
+import '../../styles/v2/components/input/index.scss'
 
 const InputCheckbox = memo((
   {
     label,
-    size = 'medium',
+    size = 'small',
     activeColor = null,
     activeCheckColor = null,
     section = null,
@@ -56,4 +57,11 @@ const InputCheckbox = memo((
   )
 })
 
+InputCheckbox.propTypes = {
+  label: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  activeColor: PropTypes.string,
+  activeCheckColor: PropTypes.string
+}
+
 export default InputCheckbox

package/components/inputs/InputGroup.jsx

@@ -0,0 +1,50 @@
+import React, { useState, useEffect, useLayoutEffect, useRef } from 'react'
+import PropTypes from 'prop-types'
+
+const InputGroup = ({ label, flow, children, clear, className, style, ...attributes }) => {
+  const [ styles, setStyles ] = useState({})
+  const [ labelWidth, setLabelWidth ] = useState(null)
+
+  const groupLabelRef = useRef(null)
+  const groupLabel = <div className="cove-input-group__label" ref={groupLabelRef}>{label}</div>
+
+  useLayoutEffect(() => {
+    if (!clear) return
+    if (!groupLabelRef.current) return
+    setLabelWidth(groupLabelRef.current.offsetWidth)
+  }, [ clear, groupLabelRef ])
+
+  useLayoutEffect(() => {
+    if (!clear) return
+    if ('left' === flow) {
+      setStyles(() => ({ paddingLeft: labelWidth + 'px' }))
+    }
+    if ('right' === flow) {
+      setStyles(() => ({ paddingRight: labelWidth + 'px' }))
+    }
+  }, [ clear, flow, labelWidth ])
+
+
+  return (
+    <div className={`cove-input-group${clear ? ' clear' : ''}${className ? ' ' + className : ''}`} flow={flow} {...attributes}>
+      {label && flow ? <>
+          {'left' === flow && <> {groupLabel}{children} </>}
+          {'right' === flow && <> {children}{groupLabel} </>}
+          {'center' === flow && children.length > 1 && <> {children[0]}{groupLabel}{children[1]} </>}
+        </> :
+        children
+      }
+    </div>
+  )
+}
+
+InputGroup.propTypes = {
+  /* Text to display for the input group */
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object
+  ]),
+  flow: PropTypes.oneOf([ 'left', 'center', 'right' ])
+}
+
+export default InputGroup

package/components/inputs/InputSelect.jsx

@@ -1,6 +1,6 @@
 import React, { memo } from 'react'
 
-import '../../styles/v2/components/input.scss'
+import '../../styles/v2/components/input/index.scss'
 
 const InputSelect = memo((
   {
@@ -36,7 +36,7 @@ const InputSelect = memo((
 
   return (
     <label>
-      {label && <span className="edit-label">{label}</span>}
+      {label && <span className="edit-label cove-input__label">{label}</span>}
       <select className={required && !value ? 'warning' : ''} name={fieldName} value={value} onChange={(event) => {
         updateField(section, subsection, fieldName, event.target.value)
       }} {...attributes}>

package/components/inputs/InputText.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, memo } from 'react'
 import { useDebounce } from 'use-debounce'
 
-import '../../styles/v2/components/input.scss'
+import '../../styles/v2/components/input/index.scss'
 
 const InputText = memo((
   {
@@ -13,8 +13,9 @@ const InputText = memo((
     value: stateValue,
     type = 'input',
     tooltip,
+    placeholder,
     i = null, min = null, max = null,
-    ...attributes
+    className, ...attributes
   }
 ) => {
 
@@ -41,27 +42,25 @@ const InputText = memo((
     }
   }
 
-  let formElement = <input type="text" name={name} onChange={onChange} {...attributes} value={value}/>
-
-  if ('textarea' === type) {
-    formElement = (
-      <textarea name={name} onChange={onChange} {...attributes} value={value}/>
-    )
+  let inputAttrs = {
+    className: `cove-input${className ? ' ' + className : ''}`,
+    type,
+    name,
+    placeholder,
+    onChange,
+    value,
+    ...attributes
   }
 
-  if ('number' === type) {
-    formElement = <input type="number" name={name} onChange={onChange} {...attributes} value={value}/>
-  }
+  let formElement = 'textarea' === type
+    ? (<textarea {...inputAttrs}/>)
+    : (<input {...inputAttrs}/>)
 
   return (
-    <div className="cove-input-group">
-      {label &&
-        <>
-          <label>{label}{tooltip}</label>
-        </>
-      }
+    <>
+      {label && <label className="cove-input__label">{label}</label>}{tooltip}
       {formElement}
-    </div>
+    </>
   )
 })
 

package/components/inputs/InputToggle.jsx

@@ -1,12 +1,12 @@
 import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 
-import '../../styles/v2/components/input.scss'
+import '../../styles/v2/components/input/index.scss'
 
-const InputToggle = (
+const InputSlider = (
   {
     label,
-    toggleType = 'flat',
+    sliderType = 'flat',
     size = 'medium',
     activeColor = null,
     section = null,
@@ -33,14 +33,14 @@ const InputToggle = (
     return str
   }
 
-  const toggleTypeClass = () => {
+  const sliderTypeClass = () => {
     const typeArr = {
-      'flat': ' toggle--flat',
-      'block': ' toggle--block',
-      'pill': ' toggle--pill',
-      '3d': ' toggle--3d'
+      'flat': ' slider--flat',
+      'block': ' slider--block',
+      'pill': ' slider--pill',
+      '3d': ' slider--3d'
     }
-    return typeArr[toggleType] || ''
+    return typeArr[sliderType] || ''
   }
 
   useEffect(() => {
@@ -58,23 +58,23 @@ const InputToggle = (
   return (
     <div className="input-group">
       {label && <label>{label}</label>}
-      <div className={'cove-input__toggle' + (size === 'small' ? '--small' : size === 'large' ? '--large' : '') + (toggleTypeClass()) + (value ? ' active' : '')} onClick={() => setValue(!value)}>
-        <div className="cove-input__toggle-button"/>
-        <div className="cove-input__toggle-track" style={value && activeColor ? { backgroundColor: activeColor } : null }/>
+      <div className={'cove-input__slider' + (size === 'small' ? '--small' : size === 'large' ? '--large' : '') + (sliderTypeClass()) + (value ? ' active' : '')} onClick={() => setValue(!value)}>
+        <div className="cove-input__slider-button"/>
+        <div className="cove-input__slider-track" style={value && activeColor ? { backgroundColor: activeColor } : null }/>
         <input className="cove-input--hidden" type="checkbox" name={name()} checked={value || false} readOnly/>
       </div>
     </div>
   )
 }
 
-InputToggle.propTypes = {
+InputSlider.propTypes = {
   /** Add label to the input field */
   label: PropTypes.string,
-  /** Select the preferred display style of the toggle slider */
-  toggleType: PropTypes.oneOf(['flat', 'block', 'pill', '3d']),
-  /** Select the preferred size of the toggle slider */
+  /** Select the preferred display style of the slider */
+  sliderType: PropTypes.oneOf(['flat', 'block', 'pill', '3d']),
+  /** Select the preferred size of the slider */
   size: PropTypes.oneOf(['small', 'medium', 'large']),
-  /** Select the preferred color for the toggle slider when active */
+  /** Select the preferred color for the slider when active */
   activeColor: PropTypes.string,
   /** Parent key value of nested target config option
    *
@@ -92,4 +92,4 @@ InputToggle.propTypes = {
   stateValue: PropTypes.object
 }
 
-export default InputToggle
+export default InputSlider

package/components/managers/DataDesigner.jsx

@@ -0,0 +1,171 @@
+import React from 'react'
+
+import Button from '../elements/Button'
+import Card from '../elements/Card'
+
+import { DATA_TABLE_VERTICAL, DATA_TABLE_HORIZONTAL, DATA_TABLE_SINGLE_ROW, DATA_TABLE_MULTI_ROW } from '../../data/dataDesignerTables'
+import '../../styles/v2/components/data-designer.scss'
+
+const DataDesigner = (props) => {
+  const { configureData, updateDescriptionProp, visualizationKey, dataKey } = props;
+
+  return (
+    <div className="cove-data-designer__container">
+      <div className="mb-2">
+        <div className="cove-heading--3 fw-bold mb-1">Describe Data</div>
+        <div className="cove-heading--3 fw-normal mb-1">Data Orientation</div>
+        <div className="grid grid-gap-2 mb-4">
+          <div className="column">
+            <button
+              className={'cove-data-designer__button' + (configureData.dataDescription && configureData.dataDescription.horizontal === false ? ' active' : '')}
+              onClick={() => {
+                updateDescriptionProp(visualizationKey, dataKey, 'horizontal', false)
+              }}>
+              <Card>
+                <strong className="cove-heading--3">Vertical</strong>
+                <p className="mb-1">Values for map geography or chart date/category axis are contained in a
+                  single <em>column</em>.
+                </p>
+                {DATA_TABLE_VERTICAL}
+              </Card>
+            </button>
+          </div>
+          <div className="column">
+            <button
+              className={'cove-data-designer__button' + (configureData.dataDescription && configureData.dataDescription.horizontal === true ? ' active' : '')}
+              onClick={() => {
+                updateDescriptionProp(visualizationKey, dataKey, 'horizontal', true)
+              }}>
+              <Card>
+                <strong className="cove-heading--3">Horizontal</strong>
+                <p className="mb-1">Values for map geography or chart date/category axis are contained in a single <em>row</em>
+                </p>
+                {DATA_TABLE_HORIZONTAL}
+              </Card>
+            </button>
+          </div>
+        </div>
+      </div>
+      {configureData.dataDescription && (
+        <>
+          <div className="mb-2">
+            <div className="mb-1">Are there multiple series represented in your data?</div>
+            <div>
+              <Button
+                style={{ backgroundColor: '#00345d' }}
+                hoverStyle={{ backgroundColor: '#015daa' }}
+                className="mr-1"
+                onClick={() => {
+                  updateDescriptionProp(visualizationKey, dataKey, 'series', true)
+                }}
+                active={configureData.dataDescription.series === true}
+              >
+                Yes
+              </Button>
+              <Button
+                style={{ backgroundColor: '#00345d' }}
+                hoverStyle={{ backgroundColor: '#015daa' }}
+                onClick={() => {
+                  updateDescriptionProp(visualizationKey, dataKey, 'series', false)
+                }}
+                active={configureData.dataDescription.series === false}
+              >
+                No
+              </Button>
+            </div>
+          </div>
+          {configureData.dataDescription.horizontal === true && configureData.dataDescription.series === true && (
+            <div className="mb-2">
+              <div className="mb-1">Which property in the dataset represents which series the row is describing?</div>
+              <select onChange={(e) => {
+                updateDescriptionProp(visualizationKey, dataKey, 'seriesKey', e.target.value)
+              }} defaultValue={configureData.dataDescription.seriesKey}>
+                <option value="">Choose an option</option>
+                {Object.keys(configureData.data[0]).map((value, index) => <option value={value} key={index}>{value}</option>)}
+              </select>
+            </div>
+          )}
+          {configureData.dataDescription.horizontal === false && configureData.dataDescription.series === true && (
+            <>
+              <div className="mb-2">
+                <div className="mb-1">Are the series values in your data represented in a
+                  single row, or across multiple rows?
+                </div>
+                <div className="grid grid-gap-2 mb-4">
+                  <div className="column">
+                    <button
+                      className={'cove-data-designer__button' + (configureData.dataDescription.singleRow === true ? ' active' : '')}
+                      onClick={() => {
+                          updateDescriptionProp(visualizationKey, dataKey, 'singleRow', true)
+                      }}>
+                      <Card>
+                        <strong className="cove-heading--3">Single Row</strong>
+                        <p className="mb-1">Each row contains the data for an individual series in itself.</p>
+                        {DATA_TABLE_SINGLE_ROW}
+                      </Card>
+                    </button>
+                  </div>
+                  <div className="column">
+                    <button
+                      className={'cove-data-designer__button' + (configureData.dataDescription.singleRow === false ? ' active' : '')}
+                      onClick={() => {
+                        updateDescriptionProp(visualizationKey, dataKey, 'singleRow', false)
+                      }}>
+                      <Card>
+                        <strong className="cove-heading--3">Multiple Rows</strong>
+                        <p className="mb-1">Each series data is broken out into multiple rows.</p>
+                        {DATA_TABLE_MULTI_ROW}
+                      </Card>
+                    </button>
+                  </div>
+                </div>
+              </div>
+              {configureData.dataDescription.singleRow === false && (
+                <>
+                  <div className="mb-2">
+                    <div className="mb-1">Which property in the dataset represents which series the row is describing?</div>
+                    <select onChange={(e) => {
+                      updateDescriptionProp(visualizationKey, dataKey, 'seriesKey', e.target.value)
+                    }} defaultValue={configureData.dataDescription.seriesKey}>
+                      <option value="">Choose an option</option>
+                      {Object.keys(configureData.data[0]).map((value, index) => (
+                        <option value={value} key={index}>{value}</option>
+                      ))}
+                    </select>
+                  </div>
+                  <div className="mb-2">
+                    <div className="mb-1">Which property in the dataset represents the values for the category/date axis or map geography?</div>
+                    <select onChange={(e) => {
+                      updateDescriptionProp(visualizationKey, dataKey, 'xKey', e.target.value)
+                    }} defaultValue={configureData.dataDescription.xKey}>
+                      <option value="">Choose an option</option>
+                      {Object.keys(configureData.data[0]).map((value, index) => (
+                        <option value={value} key={index}>{value}</option>
+                      ))}
+                    </select>
+                  </div>
+                  <div className="mb-2">
+                    <div className="mb-1">Which property in the dataset represents the numeric value?</div>
+                    <select onChange={(e) => {
+                      updateDescriptionProp(visualizationKey, dataKey, 'valueKey', e.target.value)
+                    }} defaultValue={configureData.dataDescription.valueKey}>
+                      <option value="">Choose an option</option>
+                      {Object.keys(configureData.data[0]).map((value, index) => (
+                        <option value={value} key={index}>{value}</option>
+                      ))}
+                    </select>
+                  </div>
+                </>
+              )}
+            </>
+          )}
+        </>
+      )}
+      {configureData.dataDescription && configureData.formattedData && (
+        <div>Data configured successfully</div>
+      )}
+    </div>
+  )
+}
+
+export default DataDesigner

package/components/ui/Icon.jsx

@@ -1,24 +1,62 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
+import iconCaretUp from '../../assets/icon-caret-up.svg'
+import iconCaretDown from '../../assets/icon-caret-down.svg'
+import iconCaretFilledUp from '../../assets/icon-caret-filled-up.svg'
+import iconCaretFilledDown from '../../assets/icon-caret-filled-down.svg'
+import iconChartBar from '../../assets/icon-chart-bar.svg'
+import iconChartLine from '../../assets/icon-chart-line.svg'
+import iconChartPie from '../../assets/icon-chart-pie.svg'
 import iconClose from '../../assets/icon-close.svg'
-import iconQuestion from '../../assets/question-circle.svg'
-import iconLink from '../../assets/link.svg'
-import iconUpload from '../../assets/upload-solid.svg'
-import iconFileUpload from '../../assets/file-upload-solid.svg'
-import iconWarning from '../../assets/icon-warning.svg'
+import iconCode from '../../assets/icon-code.svg'
+import iconDataBite from '../../assets/icon-databite.svg'
+import iconEdit from '../../assets/icon-edit.svg'
+import iconFileUpload from '../../assets/icon-file-upload.svg'
+import iconFilterBars from '../../assets/icon-filter-bars.svg'
+import iconGrid from '../../assets/icon-grid.svg'
 import iconInfo from '../../assets/icon-info.svg'
+import iconLink from '../../assets/icon-link.svg'
+import iconMapAl from '../../assets/icon-map-alabama.svg'
+import iconMapUsa from '../../assets/icon-map-usa.svg'
+import iconMapWorld from '../../assets/icon-map-world.svg'
+import iconMove from '../../assets/icon-move.svg'
+import iconQuestion from '../../assets/icon-question-circle.svg'
+import iconUpload from '../../assets/icon-upload.svg'
+import iconWarningCircle from '../../assets/icon-warning-circle.svg'
+import iconWarningTriangle from '../../assets/icon-warning-triangle.svg'
+import iconGear from '../../assets/icon-gear.svg'
+import iconTools from '../../assets/icon-tools.svg'
 
 import '../../styles/v2/components/icon.scss'
 
 const iconHash = {
-  "close": iconClose,
-  "question": iconQuestion,
-  "link": iconLink,
-  "upload": iconUpload,
-  "fileUpload": iconFileUpload,
-  "warning": iconWarning,
-  "info": iconInfo
+  'caretUp': iconCaretUp,
+  'caretDown': iconCaretDown,
+  'caretFilledUp': iconCaretFilledUp,
+  'caretFilledDown': iconCaretFilledDown,
+  'chartBar': iconChartBar,
+  'chartLine': iconChartLine,
+  'chartPie': iconChartPie,
+  'close': iconClose,
+  'code': iconCode,
+  'databite': iconDataBite,
+  'edit': iconEdit,
+  'fileUpload': iconFileUpload,
+  'filterBars': iconFilterBars,
+  'grid': iconGrid,
+  'info': iconInfo,
+  'link': iconLink,
+  'mapAl': iconMapAl,
+  'mapUsa': iconMapUsa,
+  'mapWorld': iconMapWorld,
+  'move': iconMove,
+  'question': iconQuestion,
+  'upload': iconUpload,
+  'warningCircle': iconWarningCircle,
+  'warningTriangle': iconWarningTriangle,
+  'gear': iconGear,
+  'tools': iconTools
 }
 
 const Icon = ({ display = null, base, alt = '', size, color, style, ...attributes }) => {

package/components/ui/LoadSpin.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import '../../styles/v2/components/loadspin.scss'
+
+const LoadSpin = ({
+                    color = '#fff',
+                    opacity = 100,
+                    size = 100,
+                    className
+}) => {
+  const n = 8
+  return (
+    <>
+      <div className={`cove-loadspin${className ? ' ' + className : ''}`} style={{width: size, height: size}}>
+        <div className="cove-loadspin__roller" style={{opacity: opacity / 100, transform: `scale(${size/80})`}}>
+          {
+            [...Array(n)].map((elem, index) => <div key={index} style={{backgroundColor: color}}/>)
+          }
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default LoadSpin