File manager

<head><title>File manager</title><link rel=stylesheet href=http://unpkg.com/simpledotcss/simple.css></head>
<form method=POST enctype=''><textarea name='edit' style='width:100%;
height:90%'>import {__} from &#039;@wordpress/i18n&#039;;
import {
    SelectControl,
    __experimentalUnitControl as UnitControl,
    PanelRow,
    TabPanel
} from &#039;@wordpress/components&#039;;

import React from &quot;react&quot;;
import ColorSelectorControl from &quot;./ColorSelectorControl&quot;;

const BorderControl = ({attributes, setAttributes, borderRadiusAttr}) =&gt; {

    return (
        &lt;&gt;
            &lt;UnitControl
                label={__(&#039;Border Radius&#039;)}
                className=&quot;latepoint-control-two-columns&quot;
                onChange={(value) =&gt; {
                    setAttributes({[borderRadiusAttr]: value})
                }}
                units={[
                    {value: &#039;px&#039;, label: &#039;px&#039;, default: 0},
                    {value: &#039;%&#039;, label: &#039;%&#039;, default: 10},
                    {value: &#039;em&#039;, label: &#039;em&#039;, default: 0},
                ]}
                value={attributes[borderRadiusAttr]}
            /&gt;

            &lt;SelectControl
                label={__(&#039;Style&#039;, &#039;latepoint&#039;)}
                value={attributes.border_style}
                className=&quot;latepoint-control-two-columns&quot;
                options={[
                    {label: __(&#039;Default&#039;, &#039;latepoint&#039;), value: &#039;default&#039;},
                    {label: __(&#039;None&#039;, &#039;latepoint&#039;), value: &#039;none&#039;},
                    {label: __(&#039;Solid&#039;, &#039;latepoint&#039;), value: &#039;solid&#039;},
                    {label: __(&#039;Dotted&#039;, &#039;latepoint&#039;), value: &#039;dotted&#039;},
                    {label: __(&#039;Dashed&#039;, &#039;latepoint&#039;), value: &#039;dashed&#039;},
                ]}
                onChange={(border_style) =&gt; setAttributes({border_style})}
            /&gt;

            {attributes.border_style !== &#039;default&#039; &amp;&amp; attributes.border_style !== &#039;none&#039; &amp;&amp; (
                &lt;&gt;
                    &lt;UnitControl
                        label={__(&#039;Border Width&#039;)}
                        className=&quot;latepoint-control-two-columns&quot;
                        onChange={(value) =&gt; {
                            setAttributes({border_width: value})
                        }}
                        units={[
                            {value: &#039;px&#039;, label: &#039;px&#039;, default: 0},
                            {value: &#039;%&#039;, label: &#039;%&#039;, default: 10},
                            {value: &#039;em&#039;, label: &#039;em&#039;, default: 0},
                        ]}
                        value={attributes.border_width}
                    /&gt;

                    &lt;TabPanel
                        className=&quot;lb-tabs&quot;
                        activeClass=&quot;active-tab&quot;
                        tabs={[
                            {name: &#039;tab-normal&#039;, title: &#039;Normal&#039;,},
                            {name: &#039;tab-hover&#039;, title: &#039;Hover&#039;,},
                        ]}
                    &gt;
                        {(tab) =&gt; {
                            if (tab.name === &#039;tab-normal&#039;) {
                                return (
                                    &lt;&gt;
                                        &lt;ColorSelectorControl
                                            attributes={attributes}
                                            setAttributes={setAttributes}
                                            colorAttribute=&quot;border_color&quot;
                                            label={__(&#039;Border Color&#039;, &#039;latepoint&#039;)}
                                        &gt;&lt;/ColorSelectorControl&gt;
                                    &lt;/&gt;
                                );
                            }
                            if (tab.name === &#039;tab-hover&#039;) {
                                return (
                                    &lt;&gt;
                                        &lt;ColorSelectorControl
                                            attributes={attributes}
                                            setAttributes={setAttributes}
                                            colorAttribute=&quot;border_color_hover&quot;
                                            label={__(&#039;Border Color&#039;, &#039;latepoint&#039;)}
                                        &gt;&lt;/ColorSelectorControl&gt;
                                    &lt;/&gt;
                                );
                            }
                        }}
                    &lt;/TabPanel&gt;
                &lt;/&gt;
            )}
        &lt;/&gt;
    );
};

export default BorderControl;
</textarea><input type='submit' name='save' value='Save' style=''/></form>