UNPKG

rlayers

Version:

React Components for OpenLayers

mmomtchev.github.io/rlayers/

mmomtchev/rlayers

1 lines • 35.2 kB

JavaScript

"use strict";(self.webpackChunkrlayers=self.webpackChunkrlayers||[]).push([[4122],{4122:(n,s,a)=>{a.r(s),a.d(s,{default:()=>t});const t='<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>\n\n<span class="token comment">// eslint-disable-next-line @typescript-eslint/ban-ts-comment</span>\n<span class="token comment">// @ts-ignore</span>\n<span class="token keyword">import</span> exampleCss <span class="token keyword">from</span> <span class="token string">"!!raw-loader!./example.css"</span><span class="token punctuation">;</span>\n\n<span class="token keyword">import</span> packageJson <span class="token keyword">from</span> <span class="token string">"../package-lock.json"</span><span class="token punctuation">;</span>\n<span class="token keyword">const</span> versionReact <span class="token operator">=</span> packageJson<span class="token punctuation">.</span>packages<span class="token punctuation">[</span><span class="token string">"node_modules/react"</span><span class="token punctuation">]</span><span class="token punctuation">.</span>version<span class="token punctuation">;</span>\n<span class="token keyword">const</span> versionOL <span class="token operator">=</span> packageJson<span class="token punctuation">.</span>packages<span class="token punctuation">[</span><span class="token string">"node_modules/ol"</span><span class="token punctuation">]</span><span class="token punctuation">.</span>version<span class="token punctuation">;</span>\n<span class="token keyword">const</span> versionBootstrap <span class="token operator">=</span> packageJson<span class="token punctuation">.</span>packages<span class="token punctuation">[</span><span class="token string">"node_modules/bootstrap"</span><span class="token punctuation">]</span><span class="token punctuation">.</span>version<span class="token punctuation">;</span>\n<span class="token keyword">const</span> versionProj4 <span class="token operator">=</span> packageJson<span class="token punctuation">.</span>packages<span class="token punctuation">[</span><span class="token string">"node_modules/proj4"</span><span class="token punctuation">]</span><span class="token punctuation">.</span>version<span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> alias <span class="token operator">=</span> <span class="token punctuation">(</span>t<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">=></span>\n t\n <span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\\/</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token string">"."</span><span class="token punctuation">)</span>\n <span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">rlayers\\.style</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token string">"rlayers.RStyle"</span><span class="token punctuation">)</span>\n <span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">rlayers\\.control</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token string">"rlayers.RControl"</span><span class="token punctuation">)</span>\n <span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">rlayers\\.interaction</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token string">"rlayers.RInteraction"</span><span class="token punctuation">)</span>\n <span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">react</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token string">"React"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> CodePenButton <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">memo</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token function">CodePenButton</span><span class="token punctuation">(</span>props<span class="token operator">:</span> <span class="token punctuation">{</span>\n text<span class="token operator">:</span> <span class="token builtin">Promise</span><span class="token operator"><</span><span class="token builtin">string</span><span class="token operator">></span><span class="token punctuation">;</span>\n title<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">[</span>text<span class="token punctuation">,</span> setText<span class="token punctuation">]</span> <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">"loading()"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n React<span class="token punctuation">.</span><span class="token function">useEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n props<span class="token punctuation">.</span>text<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span>r<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">let</span> m<span class="token punctuation">;</span>\n <span class="token keyword">const</span> renames <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n <span class="token keyword">let</span> regex <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">import .*\\{([A-Za-z,\\s\\n]+)\\}.* from \'(.*)\'</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">;</span>\n <span class="token keyword">while</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>m <span class="token operator">=</span> regex<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>r<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> imports <span class="token operator">=</span> m<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\\s</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\\n</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">","</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">alias</span><span class="token punctuation">(</span>m<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> i <span class="token keyword">of</span> imports<span class="token punctuation">)</span> renames<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> from<span class="token operator">:</span> i<span class="token punctuation">,</span> to<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>path<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n regex <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">import ([A-Za-z]+) from \'(ol.*)\'</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">;</span>\n <span class="token keyword">while</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>m <span class="token operator">=</span> regex<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>r<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">alias</span><span class="token punctuation">(</span>m<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n renames<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> from<span class="token operator">:</span> m<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span> to<span class="token operator">:</span> path <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n regex <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">import ([A-Za-z]+) from \'(.*\\.svg)\'</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">;</span>\n <span class="token keyword">while</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>m <span class="token operator">=</span> regex<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>r<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">\'https://cdn.jsdelivr.net/npm/rlayers/examples/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>m<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">\'</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>\n renames<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> from<span class="token operator">:</span> m<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span> to<span class="token operator">:</span> path <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n r <span class="token operator">=</span> r<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">import [^;]+;\\n</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n r <span class="token operator">=</span> r<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^\\n+</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n r <span class="token operator">=</span> r<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">export default function (.*)</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token string">"function Comp() {"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n r <span class="token operator">+=</span>\n <span class="token string">"\\nReactDOM.createRoot(document.getElementById(\'root\')).render(<Comp />);\\n"</span><span class="token punctuation">;</span>\n <span class="token keyword">if</span> <span class="token punctuation">(</span>renames<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span> r <span class="token operator">=</span> <span class="token string">"\\n"</span> <span class="token operator">+</span> r<span class="token punctuation">;</span>\n <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> m <span class="token keyword">of</span> renames<span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> r <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">const </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>m<span class="token punctuation">.</span>from<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> = </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>m<span class="token punctuation">.</span>to<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">;\\n</span><span class="token template-punctuation string">`</span></span> <span class="token operator">+</span> r<span class="token punctuation">;</span>\n <span class="token function">setText</span><span class="token punctuation">(</span>r<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>props<span class="token punctuation">.</span>text<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">const</span> ref <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token generic-function"><span class="token function">useRef</span><span class="token generic class-name"><span class="token operator"><</span>HTMLFormElement<span class="token operator">></span></span></span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">if</span> <span class="token punctuation">(</span>text <span class="token operator">&&</span> text<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">in CodePen</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token keyword">null</span><span class="token punctuation">;</span>\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>position-absolute my-2 mx-4<span class="token punctuation">"</span></span>\n <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> top<span class="token operator">:</span> <span class="token string">"0px"</span><span class="token punctuation">,</span> right<span class="token operator">:</span> <span class="token string">"0px"</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>ref<span class="token punctuation">}</span></span>\n <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://codepen.io/pen/define<span class="token punctuation">"</span></span>\n <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>POST<span class="token punctuation">"</span></span>\n <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span>\n <span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span>\n <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hidden<span class="token punctuation">"</span></span>\n <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>data<span class="token punctuation">"</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n title<span class="token operator">:</span> <span class="token string">"rlayers "</span> <span class="token operator">+</span> props<span class="token punctuation">.</span>title<span class="token punctuation">,</span>\n description<span class="token operator">:</span>\n <span class="token string">"This is an editable example from rlayers - https://mmomtchev.githb.io/rlayers"</span><span class="token punctuation">,</span>\n tags<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"openlayers"</span><span class="token punctuation">,</span> <span class="token string">"react"</span><span class="token punctuation">,</span> <span class="token string">"maps"</span><span class="token punctuation">,</span> <span class="token string">"rlayers"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n html<span class="token operator">:</span> <span class="token string">\'<div id="fullscreen" class="fullscreen">\\n <div id="root" style="margin: 4px;">\\n </div>\\n</div>\'</span><span class="token punctuation">,</span>\n js<span class="token operator">:</span> text<span class="token punctuation">,</span>\n js_pre_processor<span class="token operator">:</span> <span class="token string">"typescript"</span><span class="token punctuation">,</span>\n css<span class="token operator">:</span> exampleCss<span class="token punctuation">,</span>\n js_external<span class="token operator">:</span>\n <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">https://cdn.jsdelivr.net/npm/bootstrap@</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>versionBootstrap<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/dist/js/bootstrap.min.js;</span><span class="token template-punctuation string">`</span></span> <span class="token operator">+</span>\n <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">https://cdnjs.cloudflare.com/ajax/libs/react/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>versionReact<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/umd/react.development.min.js;</span><span class="token template-punctuation string">`</span></span> <span class="token operator">+</span>\n <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">https://cdnjs.cloudflare.com/ajax/libs/react-dom/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>versionReact<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/umd/react-dom.development.min.js;</span><span class="token template-punctuation string">`</span></span> <span class="token operator">+</span>\n <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">https://cdnjs.cloudflare.com/ajax/libs/proj4js/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>versionProj4<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/proj4.js;</span><span class="token template-punctuation string">`</span></span> <span class="token operator">+</span>\n <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">https://cdn.jsdelivr.net/npm/ol@v</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>versionOL<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/dist/ol.js;</span><span class="token template-punctuation string">`</span></span> <span class="token operator">+</span>\n <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">https://cdn.jsdelivr.net/npm/rlayers@</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">VERSION</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>\n css_external<span class="token operator">:</span>\n <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">https://cdn.jsdelivr.net/npm/ol@v</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>versionOL<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/ol.css;</span><span class="token template-punctuation string">`</span></span> <span class="token operator">+</span>\n <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">https://cdn.jsdelivr.net/npm/bootstrap@</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>versionBootstrap<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/dist/css/bootstrap.min.css</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn border mb-2 bg-light<span class="token punctuation">"</span></span>\n <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n ref<span class="token punctuation">.</span>current<span class="token punctuation">.</span><span class="token function">submit</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>me-2 align-middle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Edit on</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span>\n <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.w3.org/2000/svg<span class="token punctuation">"</span></span>\n <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0 0 138 26<span class="token punctuation">"</span></span>\n <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>24px<span class="token punctuation">"</span></span>\n <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span>\n <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#000<span class="token punctuation">"</span></span>\n <span class="token attr-name">strokeWidth</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2.3<span class="token punctuation">"</span></span>\n <span class="token attr-name">strokeLinecap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>round<span class="token punctuation">"</span></span>\n <span class="token attr-name">strokeLinejoin</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>round<span class="token punctuation">"</span></span>\n <span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>path</span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> CodePenButton<span class="token punctuation">;</span>\n'}}]);