https://pika.style/_next/static/chunks/pages/templates/code-image-df4e65c24e40cbfd.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7611],{46741:(e,t,i)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/templates/code-image",function(){return i(93943)}])},93943:(e,t,i)=>{"use strict";i.r(t),i.d(t,{__N_SSG:()=>q,default:()=>U});var n=i(75038),a=i(76430),s=i(2272),o=i(73982),r=i(71623),l=i(67938),c=i.n(l),d=i(17531),u=i.n(d),m=i(92376),p=i(93646),g=i(14661),x=i(28276),h=i(34530),f=i(25393),v=i(20142),y=new Map;y.set("bold",function(e){return a.createElement(a.Fragment,null,a.createElement("polyline",{points:"64 88 16 128 64 168",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"24"}),a.createElement("polyline",{points:"192 88 240 128 192 168",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"24"}),a.createElement("line",{x1:"160",y1:"40",x2:"96",y2:"216",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"24"}))}),y.set("duotone",function(e){return a.createElement(a.Fragment,null,a.createElement("polyline",{points:"64 88 16 128 64 168",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"}),a.createElement("polyline",{points:"192 88 240 128 192 168",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"}),a.createElement("line",{x1:"160",y1:"40",x2:"96",y2:"216",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"}))}),y.set("fill",function(){return a.createElement(a.Fragment,null,a.createElement("path",{d:"M70.1,82.9a7.8,7.8,0,0,0-11.2-1l-48,40a7.9,7.9,0,0,0,0,12.2l48,40a7.8,7.8,0,0,0,11.2-1,7.8,7.8,0,0,0-1-11.2L28.5,128,69.1,94.1A7.8,7.8,0,0,0,70.1,82.9Z"}),a.createElement("path",{d:"M245.1,121.9l-48-40a8,8,0,0,0-10.2,12.2L227.5,128l-40.6,33.9A8,8,0,0,0,192,176a7.7,7.7,0,0,0,5.1-1.9l48-40a7.9,7.9,0,0,0,0-12.2Z"}),a.createElement("path",{d:"M162.7,32.5a7.9,7.9,0,0,0-10.2,4.8l-64,176a7.9,7.9,0,0,0,4.8,10.2,8.6,8.6,0,0,0,2.7.5,7.9,7.9,0,0,0,7.5-5.3l64-176A7.9,7.9,0,0,0,162.7,32.5Z"}))}),y.set("light",function(e){return a.createElement(a.Fragment,null,a.createElement("polyline",{points:"64 88 16 128 64 168",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"12"}),a.createElement("polyline",{points:"192 88 240 128 192 168",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"12"}),a.createElement("line",{x1:"160",y1:"40",x2:"96",y2:"216",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"12"}))}),y.set("thin",function(e){return a.createElement(a.Fragment,null,a.createElement("polyline",{points:"64 88 16 128 64 168",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"8"}),a.createElement("polyline",{points:"192 88 240 128 192 168",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"8"}),a.createElement("line",{x1:"160",y1:"40",x2:"96",y2:"216",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"8"}))}),y.set("regular",function(e){return a.createElement(a.Fragment,null,a.createElement("polyline",{points:"64 88 16 128 64 168",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"}),a.createElement("polyline",{points:"192 88 240 128 192 168",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"}),a.createElement("line",{x1:"160",y1:"40",x2:"96",y2:"216",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"}))});var j=function(e,t){return(0,f.$)(e,t,y)},k=(0,a.forwardRef)(function(e,t){return a.createElement(v.A,Object.assign({ref:t},e,{renderPath:j}))});k.displayName="Code";var b=i(41075),w=i(8557),S=i(89934),E=i(97181),N=i(63166),C=i(94548),P=i(60509),A=i(61498);let L=c()(()=>(Promise.all([i.e(204),i.e(9417)]).then(i.t.bind(i,69417,23)),Promise.all([i.e(204),i.e(7211)]).then(i.t.bind(i,47211,23)),Promise.all([i.e(204),i.e(9959)]).then(i.t.bind(i,39959,23)),Promise.all([i.e(204),i.e(2289),i.e(9417),i.e(5097)]).then(i.t.bind(i,5097,23)),Promise.all([i.e(204),i.e(8331)]).then(i.t.bind(i,28331,23)),Promise.all([i.e(204),i.e(2289),i.e(9417),i.e(6569)]).then(i.t.bind(i,16569,23)),Promise.all([i.e(204),i.e(2289)]).then(i.t.bind(i,22289,23)),Promise.all([i.e(204),i.e(7809)]).then(i.t.bind(i,17809,23)),Promise.all([i.e(204),i.e(2289),i.e(7443)]).then(i.t.bind(i,97443,23)),Promise.all([i.e(204),i.e(2289),i.e(9417),i.e(1545),i.e(3281)]).then(i.t.bind(i,63281,23)),Promise.all([i.e(204),i.e(9417),i.e(5862)]).then(i.t.bind(i,73481,23)),Promise.all([i.e(204),i.e(8285)]).then(i.t.bind(i,88285,23)),Promise.all([i.e(204),i.e(943)]).then(i.t.bind(i,60943,23)),Promise.all([i.e(204),i.e(9285)]).then(i.t.bind(i,19285,23)),Promise.all([i.e(204),i.e(17)]).then(i.t.bind(i,20017,23)),Promise.all([i.e(204),i.e(9393)]).then(i.t.bind(i,39393,23)),Promise.all([i.e(204),i.e(6377)]).then(i.t.bind(i,16377,23)),Promise.all([i.e(204),i.e(1545)]).then(i.t.bind(i,51545,23)),Promise.all([i.e(204),i.e(4945)]).then(i.t.bind(i,34945,23)),Promise.all([i.e(204),i.e(3209)]).then(i.t.bind(i,43209,23)),Promise.all([i.e(204),i.e(8753)]).then(i.t.bind(i,48753,23)),Promise.all([i.e(204),i.e(1545),i.e(8489)]).then(i.t.bind(i,8489,23)),Promise.all([i.e(204),i.e(5865)]).then(i.bind(i,85865)),Promise.all([i.e(204),i.e(4637)]).then(i.bind(i,34637))),{loadableGenerated:{webpack:()=>[34637]},ssr:!1}),R=`import { Detail } from "@raycast/api";
2
3export default function Command() {
4  return <Detail markdown="Hello World" />;
5}`,z=({canvasRef:e,options:t,setOptions:i,outputSize:o})=>{let l,[c,d]=(0,a.useState)(null),{isPro:f,c_HandleNonPro:v}=(0,a.useContext)(s.A),y=(0,a.useRef)(),j=(0,m.useRouter)(),[z,M]=(0,a.useState)(),[T,_]=(0,a.useState)(),[W,O]=(0,a.useState)({content:R,options:{mode:t?.editorLanguage||"javascript",theme:"dracula",lineNumbers:!0,lineWrapping:!0}});(0,a.useEffect)(()=>{try{navigator?.userAgent&&d(/^((?!chrome|android).)*safari/i.test(navigator?.userAgent))}catch(e){console.log("Error init Safari")}},[]),(0,a.useEffect)(()=>{let{code:e,language:t}=j?.query;if(e)try{let n=atob(e),a=new TextDecoder().decode(Uint8Array.from(n,e=>e.charCodeAt(0)));a&&(O(e=>({...e,content:a,...t&&{options:{...e.options,language:t}}})),t&&i(e=>({...e,editorLanguage:t})))}catch(e){console.log("e",e)}},[j]),(0,a.useEffect)(()=>{let e=setTimeout(()=>y.current?.refresh?.(),150);return()=>clearTimeout(e)},[t]);let F=({type:e})=>

5{if(!f)return void v({text:"Upgrade to Pro to add shapes in canvas"});let t={id:+new Date,type:"rectangle",opacity:1,background:"#c489f8",zIndex:30,blur:0,borderWidth:2,borderColor:"#9f54f4"},i={...t,id:+new Date,type:"highlight"},n={...t,id:+new Date,type:"circle"},a={...t,id:+new Date,type:"square"};switch(e){case"rectangle":_(e=>e?.length?[...e,t]:[t]);break;case"circle":_(e=>e?.length?[...e,n]:[n]);break;case"square":_(e=>e?.length?[...e,a]:[a]);break;case"highlight":_(e=>e?.length?[...e,i]:[i])}};return(0,n.jsxs)("div",{className:"flex flex-col w-full",children:[(0,n.jsx)(u(),{children:(0,n.jsx)("link",{href:"https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400&family=Space+Mono:wght@400&family=JetBrains+Mono:wght@400&family=DM+Mono:wght@400&display=swap",crossOrigin:"anonymous",rel:"stylesheet"})}),(0,n.jsx)(()=>(0,n.jsxs)(x.ER,{children:[(0,n.jsx)("div",{children:(0,n.jsx)(h.m_,{text:"Quickly create code screenshot from VSCode editor",children:(0,n.jsx)(h.$n,{className:"flex items-center",variant:"secondary",as:"a",href:"/tools/vscode-extension",prefix:(0,n.jsx)(k,{size:16,className:"mr-2"}),children:"Get VSCode extension"})})}),(0,n.jsxs)("div",{className:"ml-auto flex items-center space-x-4",children:[(0,n.jsx)(x.sc,{shapesStack:T,setShapesStack:_,trigger:(0,n.jsx)(h.ms,{trigger:(0,n.jsx)(h.$n,{variant:"secondary",suffix:(0,n.jsx)(b.A,{size:15}),className:(0,r.A)("text-sm focus:z-10",T?.length?"rounded-r-none! ":""),children:(0,n.jsx)("span",{className:"hidden md:inline-flex mr-1",children:"Add"})}),items:[{icon:(0,n.jsx)(w.A,{size:15}),title:(0,n.jsx)(n.Fragment,{children:"Rectangle"}),onClick:()=>F({type:"rectangle"})},{icon:(0,n.jsx)(S.A,{size:15}),title:(0,n.jsx)(n.Fragment,{children:"Circle"}),onClick:()=>F({type:"circle"})},{icon:(0,n.jsx)(E.A,{size:15}),title:(0,n.jsx)(n.Fragment,{children:"Square"}),onClick:()=>F({type:"square"})},{icon:(0,n.jsx)(N.A,{size:15}),title:(0,n.jsx)(n.Fragment,{children:"Highlight"}),onClick:()=>F({type:"highlight"})}]}),listTrigger:(0,n.jsx)(h.m_,{text:"Manage Layers",children:(0,n.jsx)(h.$n,{variant:"secondary",className:"rounded-l-none! text-sm -ml-px px-1 focus:z-10",children:(0,n.jsx)(C.A,{size:14})})})}),(0,n.jsx)(x.RT,{textStack:z,setTextStack:M,trigger:(0,n.jsx)(h.$n,{variant:"secondary",prefix:(0,n.jsx)(P.A,{size:15}),className:(0,r.A)("text-sm focus:z-10",z?.length?"rounded-r-none! ":""),children:(0,n.jsx)("span",{className:"hidden md:inline-flex ml-1",children:"Text"})}),listTrigger:(0,n.jsx)(h.m_,{text:"Manage layers",children:(0,n.jsx)(h.$n,{variant:"secondary",className:"rounded-l-none! text-sm -ml-px px-1 focus:z-10",children:(0,n.jsx)(C.A,{size:14})})})})]})]}),{}),(0,n.jsxs)("div",{ref:e,style:((l={}).aspectRatio=t?.canvasAspectRatio?.value,t?.background?.active==="custom-color")?{...l,backgroundImage:(0,A.Bu)(t?.background)}:t?.background?.active==="image"?{...l,backgroundImage:`url(${t?.background?.image?.baseData}) `,backgroundPosition:"center",backgroundSize:"cover",backgroundRepeat:"no-repeat"}:l,className:(0,r.A)("canvas duration-100 flex items-center relative justify-center w-full h-full py-10 md:py-[100px] px-[2px] origin-top overflow-hidden",t?.background?.active==="gradient"&&t?.background?.gradientDirection?.tw,t?.background?.active==="gradient"&&t?.background?.gradient,t?.canvasAspectRatio?.value!=="auto"&&"useAutoHeight"),children:[(0,n.jsx)(p.Mx,{options:t}),(0,n.jsx)(p.Mt,{options:t}),(0,n.jsx)(p.$P,{textStack:z,setTextStack:M,options:t,setOptions:e=>i(t=>({...t,imageText:{...t.imageText,...e}}))}),(0,n.jsx)(p.E_,{shapesStack:T,setShapesStack:_,options:t}),(0,n.jsx)("div",{style:{transform:`translateX(${t?.positionX||0}%) translateY(${t?.positionY||0}%)`},className:(0,r.A)("relative w-full"),children:(0,n.jsx)(g.A,{tiltAngleXManual:t?.imageTilt?.angleX||0,tiltAngleYManual:t?.imageTilt?.angleY||0,className:(0,r.A)("w-full flex items-center justify-center"),children:(0,n.jsx)("div",{className:"relative w-full",style:{maxWidth:`${t?.editorWidth}%`},children:(0,n.jsx)(L,{isSafari:c,editorRef:y,code:W.content,setCode:e=>O(t=>({...t,content:e})),options:t,editorOptions:{mode:t?.editorLanguage,theme:t?.editorTheme==="light"?"juejin":"material",lineNumbers:!1,tabSize:2,lineWrapping:!0,indentWithTabs:!1,autofocus:!0,cursorHeight:t?.codeFontSize/15-5}})})})})]})]})};var M=i(36791),T=i(12075);let _=({label:e,options:t,setOptions:i})=>(0,n.jsxs)("div",{className:"flex items-center justify-between w-full px-4 py-[10px]",children:[(0,n.jsx)("div",{className:"text-sm font-semibold dark:text-gray-200 flex items-center",children:e??"Editor Theme"}),(0,n.jsx)(h.s3,{value:t?.editorTheme,items:[{content:"Light",value:"light"},{content:"Dark",value:"dark"}],onChange:e=>i(e)})]}),W=({label:e,options:t,setOptions:i})=>(0,n.jsxs)("div",{className:"flex items-center justify-between w-full px-4 py-2",children:[(0,n.jsx)("div",{className:"text-sm font-semibold dark:text-gray-200 flex items-center",children:e??"Language"}),(0,n.jsx)("div",{className:"max-w-[50%] w-full",children:(0,n.jsx)(h.l6,{inputClassName:"w-full text-sm",value:t?.editorLanguage,options:[{title:"Clike",value:"clike"},{title:"Clojure",value:"clojure"},{title:"CoffeeScript",value:"coffeescript"},{title:"CSS",value:"css"},{title:"Dart",value:"dart"},{title:"Elixir",value:"elixir"},{title:"Elm",value:"elm"},{title:"Go",value:"go"}

5,{title:"HTML",value:"htmlmixed"},{title:"Java",value:"text/x-java"},{title:"JavaScript/TypeScript",value:"javascript"},{title:"JSX",value:"jsx"},{title:"Markdown",value:"markdown"},{title:"Perl",value:"perl"},{title:"PHP",value:"php"},{title:"Python",value:"python"},{title:"Ruby",value:"ruby"},{title:"SASS",value:"sass"},{title:"Shell",value:"shell"},{title:"Slim",value:"slim"},{title:"SQL",value:"sql"},{title:"Swift",value:"swift"},{title:"Yaml",value:"yaml"}],onChange:e=>{i(e.target.value)}})})]});var O=i(19297);let F=({label:e,options:t,setOptions:i})=>{let{isPro:o,c_HandleNonPro:r}=(0,a.useContext)(s.A);return(0,n.jsxs)("div",{className:"flex items-center justify-between w-full px-4 py-2",children:[(0,n.jsxs)("div",{className:"text-sm font-semibold dark:text-gray-200 flex items-center",children:[o?"":(0,n.jsx)(O.A,{size:15,className:"mr-1 opacity-40"}),e??"Font"]}),(0,n.jsx)("div",{className:"max-w-[50%] w-full",children:(0,n.jsx)(h.l6,{inputClassName:"w-full text-sm",value:t?.editorFont,options:[{title:"JetBrains Mono",value:"JetBrains Mono"},{title:"IBM Plex Mono",value:"IBM Plex Mono"},{title:"Source Code Pro",value:"Source Code Pro"},{title:"DM Mono",value:"DM Mono"},{title:"Space Mono",value:"Space Mono"}],onChange:e=>{o?i(e.target.value):r({text:"Upgrade to Pro to customize font"})}})})]})},D=({options:e,setOptions:t,saveImage:i,copyImage:a,imageRef:s})=>(0,n.jsx)(o.E,{children:(0,n.jsxs)("div",{className:"w-full",children:[(0,n.jsx)("div",{className:"text-center text-gray-500 bg-gray-200 px-4 py-1 dark:bg-gray-900 w-full text-sm",children:"Editor Options"}),(0,n.jsxs)("div",{className:"divide-y divide-gray-200 dark:divide-gray-800 w-full",children:[(0,n.jsx)(W,{options:e,setOptions:e=>t(t=>({...t,editorLanguage:e}))}),(0,n.jsx)(F,{options:e,setOptions:e=>t(t=>({...t,editorFont:e}))}),(0,n.jsx)(_,{options:e,setOptions:e=>t(t=>({...t,editorTheme:e}))}),(0,n.jsx)(h.Ap,{min:14,max:24,label:"Font size",stepValue:e?.codeFontSize,value:e?.codeFontSize||16,onChange:e=>t(t=>({...t,codeFontSize:e}))}),(0,n.jsx)(h.Ap,{min:30,max:150,stepValue:e?.editorWidth,value:e?.editorWidth||80,label:"Editor Width",onChange:e=>t(t=>({...t,editorWidth:e}))}),(0,n.jsx)(h.Ap,{min:0,max:24,label:"Roundness",defaultValue:10,value:e?.imageRoundness,stepValue:e?.imageRoundness,onChange:e=>t(t=>({...t,imageRoundness:e}))}),(0,n.jsx)(h.Ap,{min:0,max:10,label:"Shadow",stepValue:e?.imageShadow,value:e?.imageShadow,onChange:e=>t(t=>({...t,imageShadow:e}))}),(0,n.jsxs)("div",{className:"flex w-full divide-x divide-gray-200 dark:divide-gray-800",children:[(0,n.jsx)(M.Ru,{options:e,setOptions:e=>t(t=>({...t,imageTilt:e}))}),(0,n.jsx)(M.yX,{options:e,setOptions:t})]})]}),(0,n.jsx)("div",{className:"text-center text-gray-500 bg-gray-200 px-4 py-1 dark:bg-gray-900 w-full text-sm",children:"Canvas options"}),(0,n.jsxs)("div",{className:"divide-y divide-gray-200 dark:divide-gray-800 w-full",children:[(0,n.jsx)(M.qU,{hideSizes:["aspect-adapt","aspect-insta-post","aspect-insta-story","aspect-app-store"],options:e,setOptions:e=>t(t=>({...t,canvasAspectRatio:e}))}),(0,n.jsx)(M.VS,{options:e,setOptions:t}),(0,n.jsx)(M.gE,{options:e,setOptions:t}),(0,n.jsx)(M.aR,{options:e,setOptions:t})]}),(0,n.jsx)(T.CR,{saveImage:i,copyImage:a,allowScaling:!0,imageRef:s})]})});var I=i(1433),H=i(72651),Y=i(7880),X=i.n(Y),$=i(19977),q=!0;let U=e=>{let{currentTemplate:t}=e,i=(0,a.useRef)(),r=(0,a.useRef)(),{c_Session:l,c_SetStats:c,isPro:d}=(0,a.useContext)(s.A),[u,m]=(0,a.useState)(!1),[p,g]=(0,a.useState)({w:null,h:null,canvasScale:1,vw:null,vh:null}),[x,f]=(0,a.useState)({}),[v,y]=(0,a.useState)({background:{active:"custom-color",gradientDirection:{css:"to bottom right",tw:"bg-linear-to-br"},gradient:"from-[#c3c3c3] to-[#1a180b]",customColor:{colorStart:"#cae7b9",colorEnd:"#cae7b9"},image:{baseData:"/backgrounds/pika-3.png"}},canvasAspectRatio:{name:"Auto",value:"auto",key:"aspect-auto"},imageTilt:{angleX:0,angelY:0},watermark:{socials:{text:"",link:"yourwebsite.com",twitter:"handle",facebook:"",linkedin:"",youtube:"",instagram:""}

5,logo:"",bgColor:"bg-gray-800/30",position:"bottom-0 justify-center",active:!1},imageWidth:90,imageShadow:2,positionX:0,positionY:0,imageRoundness:12,canvasRoundness:8,imageText:{active:!1,positionX:0,positionY:0,iconSize:80,textWidth:100,lineHeight:1.1,textColor:"#111",textAlignment:"center",size:1,position:"top",title:"Add your heading here",subTitle:"→ Go to Add Text to tweak this text\n→ You can add multi-line subtext here\n→You can also add a custom icon or logo here"},layout:{key:"style-1",tw:{first:"",second:"",third:""}},codeFontSize:16,editorTheme:"dark",editorLanguage:"javascript",editorWidth:66,editorFont:"DM Mono",pattern:{value:"waves",name:"Waves",opacity:17,shapeSize:90,blending:"overlay",linesIntensity:3,patternIntensity:30,patternRotation:149,gridColor:"#ffffff",blur:0}}),j=async({customScale:e="1x",format:t="png",fileNamePrefix:a}={})=>{let s;if(m(e=>(s=e,e)),s)return;let o=I.oR.loading((0,n.jsxs)(n.Fragment,{children:["Exporting image in ",(0,n.jsx)("span",{className:"uppercase ml-1",children:t}),"..."]}));m(!0),(0,H.vq)("template_save",{key:l?.email??""}),(0,H.i6)({ref:i?.current,format:t,customScale:e,fileNamePrefix:a,onSuccess:async()=>{if(I.oR.success("Image exported!",{id:o}),k(),m(!1),l){c({type:"template",exportType:"save",isPro:d});try{let e={type:"save",template_id:"code-image",user_id:l?.id},t=(0,$.U)();await t.from("stats").insert({...e})}catch(e){console.error("Error saving stats",e)}}},onError:e=>{I.oR.error("Something went wrong, please try again",{id:o}),m(!1)}})},k=()=>{setTimeout(()=>{r?.current((0,H.Oe)({x:.1,y:.3})),r?.current((0,H.Oe)({x:.7,y:.9})),r?.current((0,H.Oe)({x:.8,y:.9})),r?.current((0,H.Oe)({x:.6,y:.9}))},300)};(0,a.useEffect)(()=>{b()},[]);let b=()=>{let{innerWidth:e,innerHeight:t}=window;g(i=>({...i,vw:e,vh:t}))},w=()=>{setTimeout(()=>{g(e=>({...e,w:i?.current?.offsetWidth*window?.devicePixelRatio,h:i?.current?.offsetHeight*window?.devicePixelRatio,canvasScale:i?.current?.offsetHeight>p?.vh-100?1/(i?.current?.offsetHeight/(p?.vh-50)):1}))},300)};return(0,a.useEffect)(()=>{w()},[p?.vw,p?.vh,v,x]),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(X(),{className:"fixed w-full h-full pointer-events-none z-200",onInit:({confetti:e})=>r.current=e}),(0,n.jsx)(o.S,{options:v,setOptions:y,metaTitle:t?.metaTitle,name:t?.title,metaDescription:t?.metaDescription??t?.description,autoHeight:!0,content:(0,n.jsx)(z,{options:v,setOptions:y,image:x,setImage:f,canvasRef:i,isPro:d,updateOutputSize:w,outputSize:p}),info:(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(T.Ax,{currentTemplate:t}),(0,n.jsx)(()=>{let e=[{title:"Add your code snippet",content:(0,n.jsxs)("div",{children:[(0,n.jsx)("p",{children:"You can edit/paste your code snippet in the editor in the canvas on the left"}),(0,n.jsx)("br",{}),(0,n.jsxs)("p",{children:["Once done, you can select the language of your code using",(0,n.jsx)(h.iM,{children:"Language"})," option on the right. Selecting the right language will also enable correct syntax highlighting for your code"]})]}),gradientClass:"from-green-600 to-teal-700"},{title:"Customize your image",content:(0,n.jsxs)("div",{children:[(0,n.jsx)("p",{children:"Use the customization options to beautify your image as you like"}),(0,n.jsx)("br",{}),(0,n.jsx)("p",{children:"You can change code font size, editor width, editor theme, canvas size, background color or image, add custom text or icon, add tilt-effect and more"})]}),gradientClass:"from-blue-500 to-indigo-700"},{title:"Export your image",content:(0,n.jsxs)("div",{children:[(0,n.jsxs)("p",{children:["Use shortcut ",(0,n.jsx)(h.iM,{children:"⌘+C"}),"/"," ",(0,n.jsx)(h.iM,{children:"Ctrl+C"})," to copy beautified image as PNG file to clipboard or ",(0,n.jsx)(h.iM,{children:"⌘+S"}),"/",(0,n.jsx)(h.iM,{children:"Ctrl+S"}),"to save it to your system. You can also save image in JPEG format"]}),(0,n.jsx)("br",{}),(0,n.jsxs)("p",{children:["Pro users can export images in size upto 4K resolution using the"," ",(0,n.jsx)(h.iM,{children:"2x"})," in the output size"]})]}),gradientClass:"from-orange-500 to-pink-700"}];return(0,n.jsx)(h.mc,{width:"1080px",className:"flex items-center justify-center mt-5 relative",children:(0,n.jsxs)("div",{className:"",children:[(0,n.jsx)("h2",{className:"text-2xl md:text-4xl text-center font-black mb-2 dark:text-white font-inter",children:"How to create image from code snippets?"}),(0,n.jsx)("p",{className:"text-lg mb-12 text-center",children:"3 steps to present your co

5de elegantly"}),(0,n.jsx)("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-10",children:e?.map((e,t)=>(0,n.jsxs)("div",{className:"flex flex-col items-center md:items-start justify-center md:justify-start",children:[(0,n.jsx)("div",{className:"\n                    flex items-center justify-center text-black/60 dark:text-gray-300 shadow-[0_0_44px_6px_#ff89c299] dark:shadow-[0_0_44px_2px_#dc2b81ba] mb-4 w-8 h-8 rounded-lg bg-linear-to-r bg-white dark:bg-black text-sm font-code font-semibold",children:t+1}),(0,n.jsx)("div",{className:"font-semibold my-4 dark:text-white text-xl",children:e?.title}),(0,n.jsx)("div",{className:"text-gray-700 dark:text-gray-200",children:e.content})]},e.title+t))})]})})},{}),(0,n.jsx)(T.S2,{slug:t?.slug})]}),sidebar:(0,n.jsx)(D,{options:v,setOptions:y,image:x,setImage:f,copyImage:({customScale:e="1x"}={})=>{let t,n=navigator?.userAgent?.indexOf("Firefox")<0;if(m(e=>(t=e,e)),t)return;let a=I.oR.loading("Copying image...");m(!0),(0,H.vq)("template_save",{key:l?.email??""}),(0,H.yq)({ref:i?.current,customScale:e,onSuccess:async()=>{if(I.oR.success("Image copied to clipboard",{id:a}),k(),m(!1),l){try{let e={type:"copy",template_id:"code-image",user_id:l?.id},t=(0,$.U)();await t.from("stats").insert({...e})}catch(e){console.error("Error saving stats",e)}c({type:"template",exportType:"copy",isPro:d})}},onError:e=>{console.log("Err",e),n?I.oR.error("Something went wrong, please try again",{id:a}):I.oR.error("Firefox doesn't support copying image, please use save",{id:a}),m(!1)}})},saveImage:j,isPro:d,imageRef:i?.current})})]})}}},e=>{e.O(0,[4558,8689,407,7880,9539,303,1958,3771,5642,5198,6845,2075,2909,4510,636,6593,8792],()=>e(e.s=46741)),_N_E=e.O()}]);