https://vectorart.ai/_next/static/chunks/pages/edit/svg-color-editor-55d3b409d2f79581.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6198],{5186:function(e,t,r){(window.__NEXT_P=window.__NEXT_P||[]).push(["/edit/svg-color-editor",function(){return r(3841)}])},2135:function(e,t,r){"use strict";r.d(t,{Z:function(){return h}});var n=r(6042),a=r(9396),l=r(5893),i=r(7294);r(6422);var o=r(1033),s=r(9277),c=r(346),u=r(5737),d=r(3193),m=r(2775),f=r(8886);function h(e){var t=(0,i.useContext)(s.Z).user;return(0,l.jsxs)("div",{className:"w-full",children:[(0,l.jsxs)("div",{className:"min-h-screen w-full flex flex-col bg-ggray-100 dark:bg-gray-800 "+(e.layoutClassName||""),children:[(0,l.jsx)("div",{className:"relative border-b border-gray-200 bg-white dark:bg-gray-900 dark:border-gray-700 z-10",children:(0,l.jsx)("div",{className:"container mx-auto",children:(0,l.jsx)(c.Z,(0,a.Z)((0,n.Z)({className:"secondary "},e),{supabase:o.O,user:t,slim:!0,showCreate:!0,highlightCreateButton:!0,title:e.title,description:e.description}))})}),(e.heroShow||void 0===e.heroShow)&&(0,l.jsx)("div",{className:"container mx-auto flex flex-col items-center justify-center mt-14",children:(0,l.jsx)(f.Z,{icon:e.heroIcon,iconClassName:e.heroIconClassName,title:e.heroTitle,description:e.heroDescription,hideCta:e.heroHideCta})}),(0,l.jsx)("div",{className:"overflow-hidden mx-auto mb-4 pb-2 h-full "+(e.innerLayoutClassName||""),children:e.children})]}),(0,l.jsx)("div",{className:"container mx-auto flex flex-col items-center justify-center my-8 sm:my-32 mt-2 sm:mt-16",children:(0,l.jsx)(m.Z,{})}),(0,l.jsx)("div",{className:"container mx-auto flex flex-col items-center justify-center my-8 sm:my-16",children:(0,l.jsx)(u.Z,{})}),(0,l.jsx)(d.Z,{})]})}},3841:function(e,t,r){"use strict";r.r(t),r.d(t,{default:function(){return h}});var n=r(6042),a=r(9396),l=r(5893),i=r(7720),o=r(7294);let s=o.forwardRef(function({title:e,titleId:t,...r},n){return o.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor","aria-hidden":"true",ref:n,"aria-labelledby":t},r),e?o.createElement("title",{id:t},e):null,o.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"}))});var c=r(5133),u=r(6486);let d=o.forwardRef(function({title:e,titleId:t,...r},n){return o.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",ref:n,"aria-labelledby":t},r),e?o.createElement("title",{id:t},e):null,o.createElement("path",{fillRule:"evenodd",d:"M2.25 4.125c0-1.036.84-1.875 1.875-1.875h5.25c1.036 0 1.875.84 1.875 1.875V17.25a4.5 4.5 0 11-9 0V4.125zm4.5 14.25a1.125 1.125 0 100-2.25 1.125 1.125 0 000 2.25z",clipRule:"evenodd"}),o.createElement("path",{d:"M10.719 21.75h9.156c1.036 0 1.875-.84 1.875-1.875v-5.25c0-1.036-.84-1.875-1.875-1.875h-.14l-8.742 8.743c-.09.089-.18.175-.274.257zM12.738 17.625l6.474-6.474a1.875 1.875 0 000-2.651L15.5 4.787a1.875 1.875 0 00-2.651 0l-.1.099V17.25c0 .126-.003.251-.01.375z"}))});var m=r(2135),f=function(e){var t=e.svgData,r=(0,o.useState)(0),n=r[0],a=r[1],i=(0,o.useState)(t),d=i[0],m=i[1],f=(0,o.useCallback)(function(e){var r=new DOMParser().parseFromString(t,"image/svg+xml");r.querySelectorAll("*").forEach(function(t){var r=t.getAttribute("fill");if(r&&"none"!==r&&"transparent"!==r){var n=b(r,e);n&&t.setAttribute("fill",n)}var a=t.getAttribute("stroke");if(a&&"none"!==a&&"transparent"!==a){var l=b(a,e);l&&t.setAttribute("stroke",l)}("linearGradient"===t.tagName||"radialGradient"===t.tagName)&&t.querySelectorAll("stop").forEach(function(t){var r=t.getAttribute("stop-color");if(r&&"none"!==r&&"transparent"!==r){var n=b(r,e);n&&t.setAttribute("stop-color",n)}})});var n=new XMLSerializer().serializeToString(r);m(n)},[t]),h=(0,o.useMemo)(function(){return(0,u.throttle)(f,100,{leading:!0,trailing:!0})},[f]),v=function(e){var t=Number(e.target.value);a(t),h(t)},g=function(e){var t=parseInt(e.target.value);if(!isNaN(t)){var r=Math.max(0,Math.min(360,t));a(r),h(r)}},x=function(){a(0),m(t)},p=function(){var e=new Blob([d],{type:"image/svg+xml"}),t=URL.createObjectURL(e),r=document.createElement("a");r.href=t,r.download="modified.svg",document.body.appendChild(r),r.click(),document.body.removeChild(r),URL.revokeObjectURL(t)},b=(0,o.useCallback)(function(e,t){if("none"===e||"transparent"===e||"currentColor"===e||e.startsWith("url("))return e;var r=w(e);if(!r)return e;var n=j(r);if(!n)return e;n.h=(n.h+t)%360,n.h<0&&(n.h+=360);var a=k(n);return N(a)},[]),w=function(e){var t=document.createElement("canvas").getContext("2d");t.fillStyle=e;var r=t.fillStyle;if("transparent"===r)return{r:0,g:0,b:0,a:0};if(r.startsWith("#"))return y(r);if(r.startsWith("rgb")){var n=r.match(/[\d.]+/g).map(Number);return{r:n[0],g:n[1],b:n[2],a:void 0!==n[3]?n[3]:1}}return null},y=function(e){if(3===(e=e.replace(/^#/,"")).length&&(e=e.split("").map(function(e){return e+e}).join("")),6!==e.length)return null;var t=parseInt(e,16);return{r:t>>16&255,g:t>>8&255,b:255&t,a:1}},j=function(e){var t,r,n=e.r,a=e.g,l=e.b,i=Math.max(n/=255,a/=255,l/=255),o=Math.min(n,a,l),s=(i+o)/2;if(i===o)t=r=0;else{var c=i-o;switch(r=s>.5?c/(2-i-o):c/(i+o),i){case n:t=((a-l)/c+(a<l?6:0))*60;break;case a:t=((l-n)/c+2)*60;break;case l:t=((n-a)/c+4)*60}}return{h:t,s:r,l:s}},k=function(e){var t,r,n,a=e.h,l=e.s,i=e.l;if(a/=360,0===l)t=r=n=i;else{var o=function(e,t,r){return(r<0&&(r+=1),r>1&&(r-=1),r<1/6)?e+(t-e)*6*r:r<.5?t:r<2/3?e+(t-e)*(2/3-r)*6:e},s=i<.5?i*(1+l):i+l-i*l,c=2*i-s;t=o(c,s,a+1/3),r=o(c,s,a),n=o(c,s,a-1/3)}return{r:Math.round(255*t),g:Math.round(255*r),b:Math.round(255*n)}},N=function(e){var t,r=e.r;return"#"+[r,e.g,e.b].map(function(e){var t=e.toString(16);return 1===t.length?"0"+t:t}).join("")};return(0,o.useEffect)(function(){return f(n),function(){h.cancel()}},[]),(0,l.jsxs)("div",{children:[(0,l.jsx)("div",{className:"my-4",children:(0,l.jsxs)("div",{className:"flex items-center justify-between",children:[(0,l.jsxs)("button",{onClick:x,className:"items-center inline-flex ring-0 outline-none rounded-md bg-white pl-4 px-3 py-3 font-medium text-gray-700 hover:bg-gray-200 focus:outline-none sm:col-start-1 sm:mt-0 text-sm dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700",children:[(0,l.jsx)(s,{className:"w-4 h-4 mr-2"}),"Reset"]}),(0,l.jsxs)("button",{onClick:p,className:"border disabled:bg-gray-500 disabled:border-gray-500 border-secondary-dark hover:border-secondary-darkest relative inline-flex justify-center items-center rounded-md bg-secondary-dark px-3 py-2 text-center font-semibold text-white hover:bg-secondary-darkest focus:z-10",children:[(0,l.jsx)(c.Z,{className:"w-4 h-4 mr-2"}),"Download SVG"]})]})}),(0,l.jsxs)("div",{children:[(0,l.jsx)("div",{className:"max-h-[400px] w-full aspect-square rounded-xl p-6 flex items-center justify-center bg-white relative overflow-hidden max-w-full mx-auto",style:{pointerEvents:"none"},children:(0,l.jsx)("div",{className:"w-full h-full [&>svg]:max-w-full [&>svg]:max-h-full",dangerouslySetInnerHTML:{__html:d},style:{pointerEvents:"auto",overflow:"hidden",height:"100%",maxWidth:"100%"}})}),(0,l.jsxs)("div",{className:"space-y-6",children:[(0,l.jsxs)("div",{className:"flex items-center gap-4",children:[(0,l.jsxs)("div",{className:"flex-1 relative h-12 flex items-center",children:[(0,l.jsx)("div",{className:"absolute w-full h-2 rounded-full",style:{background:function(){for(var e=[],t=0;t<=360;t+=60)e.push("hsl(".concat(t,", 100%, 50%)"));return"linear-gradient(to right, ".concat(e.join(", "),")")}(),opacity:.5}}),(0,l.jsx)("input",{type:"range",min:"0",max:"360",value:n,onChange:v,className:"w-full appearance-none bg-transparent cursor-pointer relative z-10"})]}),(0,l.jsxs)("div",{className:"w-24 relative",children:[(0,l.jsx)("input",{type:"number",value:n,onChange:g,min:"0",max:"360",className:"w-full px-3 py-2 text-right pr-8 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"}),(0,l.jsx)("span",{className:"absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm",children:"\xb0"})]})]}),(0,l.jsx)("div",{className:"flex justify-center gap-3",children:[0,60,120,180,240,300].map(function(e){return(0,l.jsx)("button",{onClick:function(){a(e),f(e)},className:"w-10 h-10 rounded-full transition-all duration-200 shadow-sm hover:shadow-md ".concat(n===e?"ring-2 ring-offset-2 ring-indigo-500":""),style:{background:"linear-gradient(45deg, hsl(".concat(e,", 100%, 50%), hsl(").concat((e+30)%360,", 100%, 60%))"),opacity:n===e?1:.8}},e)})})]})]})]})};function h(e){var t=(0,o.useState)(null),r=t[0],s=t[1];return(0,l.jsx)(m.Z,(0,a.Z)((0,n.Z)({},e),{heroTitle:"SVG Color Editor",heroDescription:"Edit the colors of your SVG file",heroIcon:(0,l.jsx)(d,{className:"w-6 h-6 text-secondary-dark dark:text-secondary"}),heroShow:!r,title:"SVG Color Editor",description:"Edit the colors of your SVG file",layoutClassName:"h-screen",children:(0,l.jsxs)("div",{className:"container mx-auto flex flex-col items-center justify-center h-full",children:[(0,l.jsx)("div",{className:"flex-1 flex flex-col items-center justify-center sm:min-h-[400px]",children:r?(0,l.jsx)(f,{svgData:r}):(0,l.jsx)(i.Z,{format:"svg",className:"sm:max-w-[600px] max-w-full h-full m-8 sm:mx-24 p-8 border-dashed border-4 text-xl font-medium",onDrop:function(e){var t=e[0],r=new FileReader;r.onload=function(e){s(e.target.result)},r.readAsText(t)}})}),r&&(0,l.jsx)("div",{className:"text-secondary-dark dark:text-secondary-light mt-8 cursor-pointer",onClick:function(){return s(null)},children:"Edit another SVG"})]})}))}},6422:function(){},5795:function(e,t,r){"use strict";var n=r(7294);let a=n.forwardRef(function({title:e,titleId:t,...r},a){return n.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor","aria-hidden":"true",ref:a,"aria-labelledby":t},r),e?n.createElement("title",{id:t},e):null,n.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5"}))});t.Z=a},5133:function(e,t,r){"use strict";var n=r(7294);let a=n.forwardRef(function({title:e,titleId:t,...r},a){return n.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor","aria-hidden":"true",ref:a,"aria-labelledby":t},r),e?n.createElement("title",{id:t},e):null,n.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"}))});t.Z=a},4510:function(e,t,r){"use strict";var n=r(7294);let a=n.forwardRef(function({title:e,titleId:t,...r},a){return n.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor","aria-hidden":"true",ref:a,"aria-labelledby":t},r),e?n.createElement("title",{id:t},e):null,n.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"}))});t.Z=a},311:function(e,t,r){"use strict";var n=r(7294);let a=n.forwardRef(function({title:e,titleId:t,...r},a){return n.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor","aria-hidden":"true",ref:a,"aria-labelledby":t},r),e?n.createElement("title",{id:t},e):null,n.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"}))});t.Z=a},7814:function(e,t,r){"use strict";var n=r(7294);let a=n.forwardRef(function({title:e,titleId:t,...r},a){return n.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor","aria-hidden":"true",ref:a,"aria-labelledby":t},r),e?n.createElement("title",{id:t},e):null,n.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"}))});t.Z=a},5083:function(e,t,r){"use strict";var n=r(7294);let a=n.forwardRef(function({title:e,titleId:t,...r},a){return n.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor","aria-hidden":"true",ref:a,"aria-labelledby":t},r),e?n.createElement("title",{id:t},e):null,n.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09

1L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"}))});t.Z=a},341:function(e,t,r){"use strict";var n=r(7294);let a=n.forwardRef(function({title:e,titleId:t,...r},a){return n.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor","aria-hidden":"true",ref:a,"aria-labelledby":t},r),e?n.createElement("title",{id:t},e):null,n.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M4.098 19.902a3.75 3.75 0 005.304 0l6.401-6.402M6.75 21A3.75 3.75 0 013 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 003.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88M6.75 17.25h.008v.008H6.75v-.008z"}))});t.Z=a},9396:function(e,t,r){"use strict";function n(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):(function(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r.push.apply(r,n)}return r})(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}),e}r.d(t,{Z:function(){return n}})}},function(e){e.O(0,[3662,1664,7897,5675,617,4891,9774,2888,179],function(){return e(e.s=5186)}),_N_E=e.O()}]);
2//# sourceMappingURL=svg-color-editor-55d3b409d2f79581.js.map