1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3755],{21094:()=>{},29006:(e,t,a)=>{"use strict";a.r(t),a.d(t,{__N_SSG:()=>H,default:()=>V});var s=a(75038),i=a(76430),r=a(58454),n=a(73982),l=a(71623),o=a(50876),c=a(93646),d=a(28276),m=a(41075),u=a(8557),x=a(89934),p=a(97181),g=a(63166),h=a(94548),f=a(60509),w=a(14661),v=a(72651),j=a(93185),y=a(11075),b=a(91672),S=a(96136),k=a(60355),C=a(83390),N=a(51301);let _=({tweet:e,options:t,tweetInfo:a,moreOptions:i})=>{let r=[{type:"retweets",iconClass:"text-green-500",icon:(0,s.jsx)(j.A,{size:24}),value:e?.custom?.rtCount??a?.public_metrics?.retweet_count??a?.retweet_count,show:t?.metrics?.rtCount},{type:"quotes",iconClass:"text-pink-500",icon:(0,s.jsx)(y.A,{size:24}),value:e?.custom?.quotesCount??a?.public_metrics?.quote_count??a?.quote_count,show:t?.metrics?.quotesCount},{type:"likes",iconClass:"text-red-500",icon:(0,s.jsx)(b.A,{size:24}),value:e?.custom?.likesCount??a?.public_metrics?.like_count??a?.favorite_count,show:t?.metrics?.likesCount},{type:"replies",iconClass:"text-blue-500",icon:(0,s.jsx)(S.A,{size:24}),value:e?.custom?.repliesCount??a?.public_metrics?.reply_count??a?.reply_count,show:t?.metrics?.repliesCount}],n=t?.metrics?.appearance==="iconOnly"||t?.metrics?.appearance==="iconText",o=t?.metrics?.appearance==="textOnly"||t?.metrics?.appearance==="iconText";return t?.showMetrics?(0,s.jsx)("div",{className:(0,l.A)("flex mt-6 opacity-80 md:flex-row flex-wrap",(()=>{switch(i?.textAlignment){case"left":default:return"";case"right":return"justify-end";case"center":return"justify-center"}})()),children:r?.map(e=>e?.show?(0,s.jsxs)("div",{className:"flex items-center mb-2 mr-5",children:[n?(0,s.jsx)("span",{className:(0,l.A)(e.iconClass,"mr-2"),children:e.icon}):"",(0,s.jsx)("span",{className:(0,l.A)("mr-1 relative leading-none",t?.metrics?.appearance==="iconOnly"?"font-normal":"font-semibold"),style:{fontSize:`${Math.max(t?.fontSize-5,18)}px`},children:(0,v.B4)(e.value)}),o?(0,s.jsx)("span",{className:"opacity-50 leading-none",style:{fontSize:`${Math.max(t?.fontSize-6,18)}px`},children:e.type}):""]},e.type):"")}):""},z=({media:e})=>{if(e[0]?.type==="animated_gif"||e[0]?.type==="video")return(0,s.jsx)("div",{className:"mt-3 rounded-xl overflow-hidden shadow max-h-[525px] flex items-center justify-center",children:(0,s.jsx)("img",{src:e[0]?.media_url_https??e[0]?.preview_image_url,className:"h-full object-cover w-full object-center",alt:"Tweet meta"})});let t=new Set,a=e.filter(e=>{let a=e?.id_str??(e?.media_url_https??e?.url)?.split("?")[0];return!t.has(a)&&(t.add(a),!0)});return(0,s.jsx)("div",{className:"grid gap-[2px] mt-3 rounded-xl overflow-hidden shadow-[0_0_12px_rgba(0,0,0,0.1)]",style:{gridTemplateColumns:(a.length+1)%2?"1fr 1fr":a?.length===3?"1fr 1fr 1fr":"1fr"},children:a?.map((e,t)=>(0,s.jsx)("div",{className:(0,l.A)("w-auto overflow-hidden shadow flex items-center justify-center",(a.length+1)%2?"max-h-[295px]":"max-h-[525px]"),children:(0,s.jsx)("img",{src:e?.media_url_https??e?.url,className:"h-full object-cover w-full",alt:"Tweet meta"})},e?.media_url_https+t))})},A=({poll:e,options:t})=>{let a=e[0]?.options,i=a?.reduce((e,t)=>e+t?.votes,0);return a?.length?(0,s.jsx)("div",{className:"mt-1 mb-4",children:a?.map(e=>(0,s.jsxs)("div",{className:" mb-2 rounded-lg px-3 py-1 relative",children:[(0,s.jsx)("div",{className:"bg-blue-300 absolute left-0 top-0 h-full rounded-lg ring-1 ring-white/60",style:{width:`${e?.votes/i*100}%`,boxShadow:"0 0 10px rgba(0,0,0,0.1)"}}),(0,s.jsxs)("div",{className:"relative flex items-center",children:[(0,s.jsx)("div",{children:e?.label}),(0,s.jsxs)("div",{className:"font-bold ml-auto",style:{fontSize:`${Math.max(t?.fontSize-6,12)}px`},children:[e?.votes," votes",(0,s.jsxs)("span",{children:[", ",parseFloat(e?.votes/i*100).toFixed(1),"%"]})]})]})]},e?.label))}):""},T=({tweet:e,tweetDataAlter:t,options:a,isSaving:n,isSafari:o})=>{let[c,d]=(0,i.useState)({textAlignment:"left"}),{isPro:m}=(0,i.useContext)(r.A),u=e?.data,x=e?.data?.user?e?.data?.user:e?.includes?.users?.length?e?.includes?.users[0]:null,p=e?.extended_entities?.media??e?.entities?.media,g=e?.includes?.polls,h=p?.length>0?N.A.autoLink((u?.text||u?.full_text||t?.text||"")?.split(" ")?.slice(0,-1).join(" "),{urlEntities:u?.entities?.urls||[]})?.replaceAll('@<a class="tweet-url username"','<a class="tweet-url username"')?.replaceAll("https://","")?.replaceAll("http://","")?.replaceAll("www.",""):N.A.autoLink(u?.text||u?.full_text||t?.text||"",{urlEntities:u?.entities?.urls||[]})?.replaceAll('@<a class="tweet-url username"','<a class="tweet-url username"')?.replaceAll("https://","")?.replaceAll("http://","")?.replaceAll("www.","");return(0,s.jsx)(s.Fragment,{children:u?.id&&(0,s.jsxs)("div",{className:(0,l.A)("p-10 md:px-10 md:py-8 backdrop-blur-xl w-full font-inter tweet-canvas"),style:{backgroundColor:`${a?.tweetBackgroun
1d||"#111"}`,color:`${a?.tweetTextColor||"#111"}`},children:[(0,s.jsxs)("div",{className:"flex items-center mb-1",children:[(0,s.jsxs)("div",{className:"flex items-center",children:[x?.profile_image_url_https||x?.profile_image_url?(0,s.jsx)("div",{className:"object-cover w-10 h-10 md:w-[52px] md:h-[52px] rounded-full flex items-center justify-center mr-3",children:(0,s.jsx)("img",{className:"border-0 rounded-full w-full flex items-start justify-center object-cover h-full",style:o?{}:{boxShadow:"0 0 6px rgba(0, 0, 0, 0.1)"},src:(x?.profile_image_url_https||x?.profile_image_url)?.replace("_normal",""),alt:x?.name})}):"",(0,s.jsxs)("div",{className:"flex flex-col ",children:[(0,s.jsxs)("div",{className:"font-semibold leading-none whitespace-nowrap flex items-center",style:{fontSize:`${Math.max(a?.fontSize-3,18)}px`},children:[(0,s.jsxs)("span",{children:[x?.name?.slice(0,48),x?.name?.length>48?"...":""]}),x?.verified?(0,s.jsx)("img",{src:"/templates/images/twitter-verified.svg",alt:"Verified user",className:"w-5 h-5 ml-1"}):""]}),(0,s.jsx)("div",{className:"mt-1 leading-none opacity-50 whitespace-nowrap",style:{fontSize:`${Math.max(a?.fontSize-7,14)}px`},children:"@"+(x?.username??x?.screen_name)})]})]}),a?.tweetLogo?(0,s.jsx)("div",{className:"ml-auto text-black",children:(0,s.jsx)(k.v,{size:32})}):""]}),("string"==typeof u?.text||u?.text instanceof String)&&h?.length?(0,s.jsx)(C.AM,{asModal:!1,trigger:(0,s.jsx)("div",{className:"whitespace-pre-wrap my-3 leading-[1.3] inline-block w-full opacity-80",style:{direction:`${c?.textAlignment==="right"?"rtl":"ltr"}`,textAlign:`${c?.textAlignment||"left"}`,wordBreak:"break-word"},contentEditable:!!m,dangerouslySetInnerHTML:{__html:h}}),content:(0,s.jsxs)("div",{children:[(0,s.jsx)("h3",{className:"dark:text-gray-200 font-semibold text-sm mb-3 border-b dark:border-gray-800 pb-1 flex items-center",children:"Text Alignment"}),(0,s.jsx)(C.s3,{value:c?.textAlignment,onChange:e=>{d(t=>({...t,textAlignment:e}))},items:[{content:"Left",value:"left"},{content:"Center",value:"center"},{content:"Right",value:"right"}]})]})}):"",a?.showPoll&&g?.length?(0,s.jsx)(A,{options:a,poll:g}):"",a?.showMedia&&p?.length?(0,s.jsx)(z,{media:p}):"",(0,s.jsxs)("div",{className:"mt-3 opacity-40",style:{fontSize:`${Math.max(a?.fontSize-8,15)}px`,textAlign:`${c?.textAlignment||"left"}`},children:[a?.showTimeDate&&e?.custom?.date?(0,s.jsx)("span",{children:e?.custom?.date}):a?.showTimeDate&&(u?.created_at||u?.tweet_created_at)?(0,s.jsxs)("span",{className:"",suppressHydrationWarning:!0,children:[new Date(u?.tweet_created_at??u?.created_at).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit",seconds:!1}),(0,s.jsx)("span",{className:"mx-1",children:"\xb7"}),new Date(u?.tweet_created_at??u?.created_at).toLocaleString("en-US",{year:"numeric",month:"short",day:"numeric"})]}):"",n?m?"":(0,s.jsxs)(C.m_,{text:"Upgrade to Pro to hide Pika branding",triggerClass:"inline-flex",children:[(0,s.jsx)("span",{className:"mx-1",children:"\xb7"}),(0,s.jsx)("span",{children:"Made with Pika.style"})]}):""]}),(0,s.jsx)(_,{tweet:e,options:a,tweetInfo:u,moreOptions:c})]})})};var R=a(58742);let M=({canvasRef:e,options:t,tweet:a,isSaving:n,setOptions:v,outputSize:j})=>{let y,{isPro:b,c_HandleNonPro:S}=(0,i.useContext)(r.A),[k,N]=(0,i.useState)(null),[_,z]=(0,i.useState)(),[A,R]=(0,i.useState)();(0,i.useEffect)(()=>{N(/^((?!chrome|android).)*safari/i.test(navigator?.userAgent))},[]);let M=({type:e})=>{if(!b)return void S({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"},a={...t,id:+new Date,type:"highlight"},s={...t,id:+new Date,type:"circle"},i={...t,id:+new Date,type:"square"};switch(e){case"rectangle":R(e=>e?.length?[...e,t]:[t]);break;case"circle":R(e=>e?.length?[...e,s]:[s]);break;case"square":R(e=>e?.length?[...e,i]:[i]);break;case"highlight":R(e=>e?.length?[...e,a]:[a])}},P=(0,i.useRef)(null),[$,O]=(0,i.useState)(1);return(0,i.useEffect)(()=>{let a=P.current;if(!a)return;let s=()=>{let[s,i]=String(t?.canvasAspectRatio?.value).split("/").map(e=>parseFloat(e)),r=e?.current?.offsetWidth||0;s&&i&&r&&a.offsetHeight?O(Math.min(1,(r*i/s-48)/(a.offsetHeight*((t?.tweetSize||100)/100)
1*((t?.imageScale||90)/100)))):O(1)};s();let i=new ResizeObserver(s);return i.observe(a),e?.current&&i.observe(e.current),()=>i.disconnect()},[a?.tweetData,t?.tweetSize,t?.imageScale,t?.tweetWidth,t?.fontSize,t?.canvasAspectRatio?.value]),(0,s.jsxs)("div",{className:"flex flex-col w-full",children:[(0,s.jsx)(()=>(0,s.jsxs)(d.ER,{children:[(0,s.jsx)("div",{children:(0,s.jsx)(C.m_,{text:"Automate customizable tweet images using API",children:(0,s.jsx)(C.$n,{className:"flex items-center",variant:"secondary",as:"a",href:"https://orshot.com/templates/tweet-image",target:"_blank",children:"Tweet Screenshot API"})})}),(0,s.jsxs)("div",{className:"ml-auto flex items-center space-x-4",children:[(0,s.jsx)(d.sc,{shapesStack:A,setShapesStack:R,trigger:(0,s.jsx)(C.ms,{trigger:(0,s.jsx)(C.$n,{variant:"secondary",suffix:(0,s.jsx)(m.A,{size:15}),className:(0,l.A)("text-sm focus:z-10",A?.length?"rounded-r-none! ":""),children:(0,s.jsx)("span",{className:"hidden md:inline-flex mr-1",children:"Add"})}),items:[{icon:(0,s.jsx)(u.A,{size:15}),title:(0,s.jsx)(s.Fragment,{children:"Rectangle"}),onClick:()=>M({type:"rectangle"})},{icon:(0,s.jsx)(x.A,{size:15}),title:(0,s.jsx)(s.Fragment,{children:"Circle"}),onClick:()=>M({type:"circle"})},{icon:(0,s.jsx)(p.A,{size:15}),title:(0,s.jsx)(s.Fragment,{children:"Square"}),onClick:()=>M({type:"square"})},{icon:(0,s.jsx)(g.A,{size:15}),title:(0,s.jsx)(s.Fragment,{children:"Highlight"}),onClick:()=>M({type:"highlight"})}]}),listTrigger:(0,s.jsx)(C.m_,{text:"Manage Layers",children:(0,s.jsx)(C.$n,{variant:"secondary",className:"rounded-l-none! text-sm -ml-px px-1 focus:z-10",children:(0,s.jsx)(h.A,{size:14})})})}),(0,s.jsx)(d.RT,{textStack:_,setTextStack:z,trigger:(0,s.jsx)(C.$n,{variant:"secondary",prefix:(0,s.jsx)(f.A,{size:15}),className:(0,l.A)("text-sm focus:z-10",_?.length?"rounded-r-none! ":""),children:(0,s.jsx)("span",{className:"hidden md:inline-flex ml-1",children:"Text"})}),listTrigger:(0,s.jsx)(C.m_,{text:"Manage layers",children:(0,s.jsx)(C.$n,{variant:"secondary",className:"rounded-l-none! text-sm -ml-px px-1 focus:z-10",children:(0,s.jsx)(h.A,{size:14})})})})]})]}),{}),(0,s.jsxs)("div",{ref:e,style:((y={}).aspectRatio=t?.canvasAspectRatio?.value,y.transform=`scale(${j?.canvasScale||1})`,t?.background?.active==="custom-color")?{...y,backgroundImage:`linear-gradient(${t?.background?.gradientDirection?.css??"to bottom right"}, ${t?.background?.customColor?.colorStart} 0%, ${t?.background?.customColor?.colorEnd} 100%`}:t?.background?.active==="image"?{...y,backgroundImage:`url(${t?.background?.image?.baseData}) `,backgroundPosition:"center",backgroundSize:"cover",backgroundRepeat:"no-repeat"}:y,className:(0,l.A)("canvas overflow-hidden w-full duration-100 flex items-center justify-center max-w-full origin-top relative",t?.background?.active==="gradient"&&t?.background?.gradientDirection?.tw,t?.background?.active==="gradient"&&t?.background?.gradient,t?.canvasAspectRatio?.value!=="auto"&&"useAutoHeight"),children:[(0,s.jsx)(c.Mx,{options:t}),(0,s.jsx)(c.Mt,{options:t}),(0,s.jsx)(c.$P,{textStack:_,setTextStack:z,options:t,setOptions:e=>v(t=>({...t,imageText:{...t.imageText,...e}}))}),(0,s.jsx)(c.E_,{shapesStack:A,setShapesStack:R,options:t}),(0,s.jsx)("div",{style:{transform:`scale(${(t?.imageScale||90)/100*$}) translateX(${t?.positionX||0}%) translateY(${t?.positionY||0}%)`,fontSize:`${t?.codeFontSize||17}px`},className:(0,l.A)("relative duration-100 w-full"),children:(0,s.jsx)(w.A,{style:{maxWidth:`${t?.tweetWidth}%`},tiltAngleXManual:t?.imageTilt?.angleX||0,tiltAngleYManual:t?.imageTilt?.angleY||0,className:(0,l.A)("w-full mx-auto"),children:(0,s.jsx)("div",{ref:P,style:{borderRadius:`${t?.imageRoundness}px`,fontSize:`${t?.fontSize}px`,transform:`scale(${t?.tweetSize}%)`,boxShadow:o.C[t?.imageShadow]?.css,borderRadius:`${t?.imageRoundness}px`},className:(0,l.A)("w-full flex items-center text-left overflow-hidden",k&&"bg-gray-200"),children:(0,s.jsx)(T,{tweet:a?.tweetData,tweetDataAlter:a?.tweetDataAlter,options:t,isSaving:n,isSafari:k})})})})]})]})};var P=a(36791),$=a(12075),O=a(44376),E=a(19297);let D=({fetchTweet:e,tweet:t,setTweet:a})=>(0,s.jsxs)("form",{className:"flex items-center w-full relative",onSubmit:t=>{t.preventDefault(),e()},children:[(0,s.jsxs)("div",{className:"w-full relative",children:[(0,s.jsx)("div",{className:"absolute left-[-6px] top-[-5px] flex items-center justify-center w-5 h-5 bg-[#1DA1F2] rounded-full text-white rotate-[-10deg]",children:(0,s.jsx)(O.A,{size:14})}),(0,s.jsx)(C.pd,{className:"text-[16px] md:text-[0.9rem] dark:bg-gray-800/50! pr-[120px]",placeholder:"Paste tweet URL and hit enter",autoFocus:!0,value:t?.url??"",onChange:e=>{a(t=>({...t,url:e.target.value}))}})]}),(0,s.jsx)("div",{className:"absolute right-[4px] top-[8px]",children:(0,s.jsx)(C.$n,{className:"text-sm rounded-md px-[8px] py-1! h-[28px] font-semibold w-[110px]",variant:"primary",disabled:t?.loading,children:t?.loading?"Loading":"Get Tweet â"})})]}),F=({options:e,setOptions:t,saveImage:a,copyImage:l,tweet:o,setTweet:c,fetchTweet:d,imageRef:u})=>{let[x,p]=(0,i.useState)({backgroundColor:!1,textColor:!1,enterTweet:!1}),{isPro:g,c_HandleNonPro:h,c_Session:f}=(0,i.useContext)(r.A);return(0,s.jsx)(n.E,{children:(0,s.jsxs)("div",{className:"w-full",children:[(0,s.jsx)("div",{className:"text-center text-gray-500 bg-gray-200 px-4 py-1 dark:bg-gray-900 w-full text-sm",children:"Tweet options"}),(0,s.jsx)("div",{className:"border-gray-200 dark:border-gray-800 w-full px-4 py-2",children:(0,s.jsx)(D,{tweet:o,setTweet:c,fetchTweet:d})}),(0,s.jsx)("div",{className:"border-b border-t border-gray-200 dark:border-gray-800 w-full px-4 py-3",children:(0,s.jsx)(C.AM,{trigger:(0,s.jsx)(s.Fragment,{children:(0,s.jsx)("div",{className:"flex items-center gap-4",children:(0,s.jsxs)("span",{className:"text-sm font-semibold dark:text-gray-200 cursor-pointer flex items-center",children:["Tweet Appearance",(0,s.jsx)(m.A,{size:15,className:"ml-[3px]"})]})})}),noSpacing:!0,content:(0,s.jsx)("div",{children:(0,s.jsxs)("div",{className:"grid grid-cols-2 divide-x divide-gray-200 dark:divide-gray-800 border-b border-gray-200 dark:border-gray-800 ",children:[(0,s.jsx)("div",{className:"py-3 px-4 flex items-center",children:(0,s.jsx)(C.dO,{labelClass:"text-sm font-semibold dark:text-gray-200",label:"Show Images",value:e?.showMedia,onChange:()=>t(e=>({...e,showMedia:!e.showMedia}))})}),(0,s.jsxs)("div",{className:"w-full py-3 px-4 flex items-center",children:[(0,s.jsx)(C.dO,{value:e?.showTimeDate,onChange:()=>{if(!g){h({text:"Please upgrade to Pro to hide date and time"}),(0,v.u4)({event:"\uD83E\uDD16 Flow",meta:f?.email?`Tweet Date customization option â Signup modal(${f?.email})`:"Tweet Date customization option â Signup modal"});return}t(e=>({...e,showTimeDate:!e.showTimeDate}))}}),(0,s.jsx)(C.m_,{text:"Show/hide date and time",children:(0,s.jsx)("span",{className:"text-sm font-semibold dark:text-gray-200 cursor-pointer flex items-center",children:"Show Date/time"})})]}),(0,s.jsx)("div",{className:"flex items-center w-full py-3 px-4 ",children:(0,s.jsx)(C.dO,{label:"Show Tweet logo",value:e?.tweetL
1ogo,onChange:()=>{if(!g){h({text:"Please upgrade to Pro to hide tweet logo"}),(0,v.u4)({event:"\uD83E\uDD16 Flow",meta:f?.email?`Tweet Logo option â Signup modal(${f?.email})`:"Tweet Logo option â Signup modal"});return}t(e=>({...e,tweetLogo:!e.tweetLogo}))}})}),(0,s.jsxs)("div",{className:"flex items-center w-full py-3 px-4 cols-span-2",children:[(0,s.jsx)(C.dO,{value:e?.showMetrics,onChange:()=>{if(!g){h({text:"Please upgrade to Pro to customize metrics appearance"}),(0,v.u4)({event:"\uD83E\uDD16 Flow",meta:f?.email?`Tweet Metrics customization option â Signup modal(${f?.email})`:"Tweet Metrics customization option â Signup modal"});return}t(e=>({...e,showMetrics:!e.showMetrics}))}}),(0,s.jsx)(C.AM,{trigger:(0,s.jsx)(C.m_,{text:"Customize metrics appearance",children:(0,s.jsxs)("span",{className:"text-sm font-semibold dark:text-gray-200 cursor-pointer flex items-center",children:["Show Metrics",(0,s.jsx)(m.A,{size:15,className:"ml-[3px]"})]})}),content:(0,s.jsxs)("div",{className:"max-w-[95vw] md:w-[340px]",children:[(0,s.jsxs)("h3",{className:"dark:text-gray-200 font-semibold text-sm mb-3 border-b dark:border-gray-800 pb-1 flex items-center",children:[g?"":(0,s.jsx)(E.A,{size:14,className:"mr-1"}),"Appearance"]}),(0,s.jsx)(C.s3,{value:e?.metrics?.appearance,onChange:e=>{if(!g){h({text:"Please upgrade to Pro to customize metrics appearance"}),(0,v.u4)({event:"\uD83E\uDD16 Flow",meta:f?.email?`Tweet Metrics customization option â Signup modal(${f?.email})`:"Tweet Metrics customization option â Signup modal"});return}t(t=>({...t,metrics:{...t.metrics,appearance:e}}))},items:[{value:"iconOnly",content:"Icon only"},{value:"textOnly",content:"Text only"},{value:"iconText",content:"Icon + Text"}]}),(0,s.jsxs)("h3",{className:"dark:text-gray-200 font-semibold text-sm mb-3 border-b dark:border-gray-800 pb-1 flex items-center mt-6",children:[g?"":(0,s.jsx)(E.A,{size:14,className:"mr-1"}),"Metric visibility"]}),(0,s.jsxs)("div",{className:"grid grid-cols-2 gap-4",children:[(0,s.jsx)(C.dO,{labelClass:"font-normal",label:"Retweet count",value:e?.metrics?.rtCount,onChange:()=>{if(!g){h({text:"Please upgrade to Pro to customize metrics appearance"}),(0,v.u4)({event:"\uD83E\uDD16 Flow",meta:f?.email?`Tweet Metrics customization option â Signup modal(${f?.email})`:"Tweet Metrics customization option â Signup modal"});return}t(e=>({...e,metrics:{...e.metrics,rtCount:!e.metrics?.rtCount}}))}}),(0,s.jsx)(C.dO,{labelClass:"font-normal",label:"Quotes count",value:e?.metrics?.quotesCount,onChange:()=>{if(!g){h({text:"Please upgrade to Pro to customize metrics appearance"}),(0,v.u4)({event:"\uD83E\uDD16 Flow",meta:f?.email?`Tweet Metrics customization option â Signup modal(${f?.email})`:"Tweet Metrics customization option â Signup modal"});return}t(e=>({...e,metrics:{...e.metrics,quotesCount:!e.metrics?.quotesCount}}))}}),(0,s.jsx)(C.dO,{labelClass:"font-normal",label:"Like count",value:e?.metrics?.likesCount,onChange:()=>{if(!g){h({text:"Please upgrade to Pro to customize metrics appearance"}),(0,v.u4)({event:"\uD83E\uDD16 Flow",meta:f?.email?`Tweet Metrics customization option â Signup modal(${f?.email})`:"Tweet Metrics customization option â Signup modal"});return}t(e=>({...e,metrics:{...e.metrics,likesCount:!e.metrics?.likesCount}}))}}),(0,s.jsx)(C.dO,{labelClass:"font-normal",label:"Replies count",value:e?.metrics?.repliesCount,onChange:()=>{if(!g){h({text:"Please upgrade to Pro to customize metrics appearance"}),(0,v.u4)({event:"\uD83E\uDD16 Flow",meta:f?.email?`Tweet Metrics customization option â Signup modal(${f?.email})`:"Tweet Metrics customization option â Signup modal"});return}t(e=>({...e,metrics:{...e.metrics,repliesCount:!e.metrics?.repliesCount}}))}})]})]})})]})]})})})}),(0,s.jsxs)("div",{className:"divide-y divide-gray-200 dark:divide-gray-800 w-full",children:[(0,s.jsx)(C.Ap,{min:14,max:28,label:"Font Size",defaultValue:16,value:e?.fontSize,stepValue:e?.fontSize,onChange:e=>t(t=>({...t,fontSize:e}))}),(0,s.jsx)(C.Ap,{min:30,max:150,defaultValue:100,stepValue:e?.tweetSize,value:e?.tweetSize,label:"Tweet Size",onCh
1ange:e=>t(t=>({...t,tweetSize:e}))}),(0,s.jsx)(C.Ap,{min:60,max:100,stepValue:e?.tweetWidth,defaultValue:100,value:e?.tweetWidth||80,label:"Tweet Width",onChange:e=>t(t=>({...t,tweetWidth:e}))}),(0,s.jsx)(C.Ap,{min:0,max:24,label:"Roundness",defaultValue:10,value:e?.imageRoundness,stepValue:e?.imageRoundness,onChange:e=>t(t=>({...t,imageRoundness:e}))}),(0,s.jsx)(C.Ap,{min:0,max:10,label:"Shadow",stepValue:e?.imageShadow,value:e?.imageShadow,onChange:e=>t(t=>({...t,imageShadow:e}))}),(0,s.jsxs)("div",{className:"grid grid-cols-2 divide-x divide-gray-200 dark:divide-gray-800 border-b border-gray-200 dark:border-gray-800 ",children:[(0,s.jsxs)("div",{className:"py-2 px-4 flex items-center",children:[(0,s.jsx)("div",{className:"text-sm font-semibold",children:"Background"}),(0,s.jsx)("div",{className:"ml-auto",children:(0,s.jsx)(C.sk,{popoverOpen:x.backgroundColor,onPopoverOpen:()=>{if(!g){h({text:"Upgrade to Pro to select Tweet background color"}),(0,v.u4)({event:"\uD83E\uDD16 Flow",meta:"Background â Tweet Background Color â Signup modal"});return}p(e=>({...e,backgroundColor:!e.backgroundColor}))},value:e?.tweetBackground,onChange:e=>{t(t=>({...t,tweetBackground:e}))}})})]}),(0,s.jsxs)("div",{className:"py-2 px-4 flex items-center",children:[(0,s.jsx)("div",{className:"text-sm font-semibold",children:"Text Color"}),(0,s.jsx)("div",{className:"ml-auto",children:(0,s.jsx)(C.sk,{popoverOpen:x.textColor,onPopoverOpen:()=>{if(!g){h({text:"Upgrade to Pro to select Tweet text color"}),(0,v.u4)({event:"\uD83E\uDD16 Flow",meta:"Background â Tweet Text Color â Signup modal"});return}p(e=>({...e,textColor:!e.textColor}))},value:e?.tweetTextColor,onChange:e=>{t(t=>({...t,tweetTextColor:e}))}})})]})]}),(0,s.jsxs)("div",{className:"flex w-full divide-x divide-gray-200 dark:divide-gray-800",children:[(0,s.jsx)(P.Ru,{options:e,setOptions:e=>t(t=>({...t,imageTilt:e}))}),(0,s.jsx)(P.yX,{options:e,setOptions:t})]})]}),(0,s.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,s.jsxs)("div",{className:"divide-y divide-gray-200 dark:divide-gray-800 w-full",children:[(0,s.jsx)(P.qU,{hideSizes:["aspect-adapt"],options:e,setOptions:e=>t(t=>({...t,canvasAspectRatio:e}))}),(0,s.jsx)(P.VS,{options:e,setOptions:t}),(0,s.jsx)(P.gE,{options:e,setOptions:t}),(0,s.jsx)(P.aR,{options:e,setOptions:t})]}),(0,s.jsx)($.CR,{saveImage:a,copyImage:l,allowScaling:!0,imageRef:u})]})})};var I=a(7880),L=a.n(I),q=a(76264),W=a(19977);let U={data:{text:"the thing about artists is they make simple and boring ideas interesting",id:"1571452477509369857",author_id:"2802264545",created_at:"2022-09-29T13:59:46.000Z",public_metrics:{retweet_count:4,reply_count:8,like_count:17,quote_count:2}},includes:{users:[{id:"2802264545",description:"design, code, saas and memes ⢠building https://t.co/aYNMUY5NiG and https://t.co/CNecU8Gie4",username:"thelifeofrishi",verified:!1,profile_image_url:"/templates/demo-images/tweet-author.jpg",name:"rishi \uD83C\uDF14"}]}};var H=!0;let V=e=>{let{currentTemplate:t}=e,a=(0,i.useRef)(),l=(0,i.useRef)(),{c_Session:o,c_SetStats:c,isPro:d}=(0,i.useContext)(r.A),[m,u]=(0,i.useState)(!1),[x,p]=(0,i.useState)({}),[g,h]=(0,i.useState)({w:null,h:null,canvasScale:1,vw:null,vh:null}),[f,w]=(0,i.useState)({tweetData:U}),[j,y]=(0,i.useState)({background:{active:"custom-color",gradientDirection:{tw:"bg-linear-to-br",css:"to bottom right"},gradient:"from-[#e98d96] to-[#e6a45e]",customColor:{colorStart:"#8abdf2",colorEnd:"#8abdf2"},image:""},canvasAspectRatio:{value:" 1 / 0.875",key:"aspect-tweet-post"},imageTilt:{angleX:0,angelY:0},watermark:{socials:{text:"",link:"yourwebsite.com",twitter:"handle",facebook:"",linkedin:"",youtube:"",instagram:""},logo:"",bgColor:"bg-gray-800/30",position:"bottom-0 justify-center",active:!1},imageWidth:90,imageShadow:4,positionX:0,positionY:0,imageRoundness:20,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:""}},fontFamily:"Default",tweetSize:100,tweetWidth:82,fontSize:24,showMedia:!0,showMetrics:!0,showPoll:!1,showTimeDate:!0,tweetLogo:!0,tweetTextColor:"#111111",tweetBackgroun
1d:"#ffffffe3",metrics:{likesCount:!0,rtCount:!0,quotesCount:!0,repliesCount:!0,appearance:"textOnly"},pattern:{value:"waves",name:"Waves",opacity:15,shapeSize:90,blending:"overlay",linesIntensity:3,patternIntensity:100,patternRotation:49,gridColor:"#ffffff",blur:0}}),b=async({customScale:e="1x",format:t="png",fileNamePrefix:i}={})=>{let r;if(u(e=>(r=e,e)),r)return;let n=R.oR.loading((0,s.jsxs)(s.Fragment,{children:["Exporting image in ",(0,s.jsx)("span",{className:"uppercase ml-1",children:t}),"..."]}));u(!0),(0,v.vq)("template_save",{key:o?.email??""}),(0,v.i6)({ref:a?.current,format:t,customScale:e,fileNamePrefix:i,onSuccess:async()=>{if(R.oR.success("Image exported!",{id:n}),S(),u(!1),o){try{let e={type:"save",template_id:"tweet-image",user_id:o?.id},t=(0,W.U)();await t.from("stats").insert({...e})}catch(e){console.error("Error saving stats",e)}c({type:"template",exportType:"save",isPro:d})}},onError:e=>{R.oR.error("Something went wrong, please try again",{id:n}),u(!1)}})},S=()=>{setTimeout(()=>{l?.current((0,v.Oe)({x:.1,y:.3})),l?.current((0,v.Oe)({x:.7,y:.9})),l?.current((0,v.Oe)({x:.8,y:.9})),l?.current((0,v.Oe)({x:.6,y:.9}))},300)},k=async()=>{let e;if(!f?.url)return void R.oR.error("Please enter valid tweet URL");try{let t=new URL(f?.url).hostname;e=["x.com","www.x.com","mobile.x.com","twitter.com","www.twitter.com","mobile.twitter.com","kizie.co","www.kizie.co"].includes(t)}catch(t){e=!1}try{if(e){let e=f?.url?.match(/status(?:es)?\/(\d+)/)?.[1];if(e){w(e=>({...e,loading:!0}));try{let t,a=await (0,v.SV)({url:"/api/templates/get-social-tweet",body:{tweetId:e}}),s=a?.error||(a?.status==="error"?a?.message:null);if(s||!a?.id){R.oR.error("string"==typeof s?s:"Couldn't fetch this tweet, please try again or a different tweet"),w(e=>({...e,loading:!1}));return}(0,v.vq)("tweet_fetched",{key:o?.email??""});let i=a?.full_text||a?.data?.text,r=Array.from((0,q.A)(i));r?.length&&(t=await Promise.all(r.map(async e=>(0,v.SV)({url:"/api/getExpandedUrl",body:{link:e}})))),t?.length&&t?.forEach(e=>i=i?.replace(e.short,e?.expanded?.endsWith("/")?e?.expanded?.slice(0,-1):e?.expanded)),w(e=>({...e,tweetData:{...a,data:{...a,text:i}},loading:!1}))}catch(e){w(e=>({...e,loading:!1}))}}else R.oR.error("Please enter a valid Tweet link")}else R.oR.error("Please enter a valid Tweet link"),w(e=>({...e,error:"Please enter valid tweet URL"}))}catch(e){w(e=>({...e,loading:!1}))}};(0,i.useEffect)(()=>(N(),window.addEventListener("resize",N),()=>window.removeEventListener("resize",N)),[]);let N=()=>{let{innerWidth:e,innerHeight:t}=window;h(a=>({...a,vw:e,vh:t}))},_=()=>{setTimeout(()=>{h(e=>({...e,w:a?.current?.offsetWidth*window?.devicePixelRatio,h:a?.current?.offsetHeight*window?.devicePixelRatio,canvasScale:a?.current?.offsetHeight>g?.vh-100?1/(a?.current?.offsetHeight/(g?.vh-50)):1}))},300)};return(0,i.useEffect)(()=>{_()},[g?.vw,g?.vh,j,x]),(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(L(),{className:"fixed w-full h-full pointer-events-none z-200",onInit:({confetti:e})=>l.current=e}),(0,s.jsx)(n.S,{options:j,setOptions:y,metaTitle:t?.metaTitle,metaDescription:t?.description,content:(0,s.jsx)(M,{options:j,setOptions:y,image:x,setImage:p,canvasRef:a,isPro:d,tweet:f,isSaving:m,outputSize:g,updateOutputSize:_}),info:(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)($.Ax,{currentTemplate:t}),(0,s.jsx)(()=>{let e=[{title:"Enter tweet link",content:(0,s.jsxs)("div",{children:[(0,s.jsx)("p",{children:"Copy the link of your tweet you want to convert to image and paste in the input field at the top of the page"}),(0,s.jsx)("br",{}),(0,s.jsx)("p",{children:"Hit enter and it'll fetch your tweet and update preview"})]}),gradientClass:"from-green-600 to-teal-700"},{title:"Customize the image",content:(0,s.jsxs)("div",{children:[(0,s.jsx)("p",{children:"On the right, you'll see bunch of customisation options like font size, tweet width, background etc."}),(0,s.jsx)("br",{}),(0,s.jsx)("p",{children:"Customize your image as you like. You can also chose to hide the tweet media and tweet metrics"})]}),gradientClass:"from-blue-500 to-indigo-700"},{title:"Export your image",content:(0,s.jsxs)("div",{children:[(0,s.jsxs)("p",{children:["Use shortcut ",(0,s.jsx)(C.iM,{children:"â+C"}),"/"," ",(0,s.jsx)(C.iM,{children:"Ctrl+C"})," to copy beautified image as PNG file to clipboard or ",(0,s.jsx)(C.iM,{children:"â+S"}),"/",(0,s.jsx)(C.iM,{children:"Ctrl+S"}),"to save it to your system. You can also save image in JPEG format"]}),(0,s.jsx)("br",{}),(0,s.jsxs)("p",{children:["Pro users can export images in size upto 4K resolution using the"," ",(0,s.jsx)(C.iM,{children:"2x"})," in the output size"]})]}),gradientClass:"from-orange-500 to-pink-700"}];return(0,s.jsx)(C.mc,{width:"1080px",className:"flex items-center justify-center mt-5 relative",children:(0,s.jsxs)("div",{className:"",children:[(0,s.jsx)("h2",{className:"text-2xl md:text-4xl text-center font-black mb-2 dark:text-white font-inter",children:"How to create tweet images?"}),(0,s.jsx)("p",{className:"text-lg mb-12 text-center",children:"3 steps to present your tweets elegantly"}),(0,s.jsx)("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-10",children:e?.map((e,t)=>(0,s.jsxs)("div",{className:"flex flex-col items-center md:items-start justify-center md:justify-start",children:[(0,s.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,s.jsx)("div",{className:"font-semibold my-4 dark:text-white text-xl",children:e?.title}),(0,s.jsx)("div",{className:"text-gray-700 dark:text-gray-200",children:e.content})]},e.title+t))})]})})},{}),(0,s.jsx)($.S2,{})]}),sidebar:(0,s.jsx)(F,{options:j,setOptions:y,image:x,setImage:p,copyImage:({customScale:e="1x"}={})=>{let t,s=navigator?.userAgent?.indexOf("Firefox")<0;if(u(e=>(t=e,e)),t)return;
1let i=R.oR.loading("Copying image...");u(!0),u(!0),(0,v.vq)("template_save",{key:o?.email??""}),(0,v.yq)({ref:a?.current,customScale:e,onSuccess:async()=>{if(R.oR.success("Image copied to clipboard",{id:i}),S(),u(!1),o){try{let e={type:"copy",template_id:"tweet-image",user_id:o?.id},t=(0,W.U)();await t.from("stats").insert({...e})}catch(e){console.error("Error saving stats",e)}c({type:"template",exportType:"copy",isPro:d})}},onError:e=>{s?R.oR.error("Something went wrong, please try again",{id:i}):R.oR.error("Firefox doesn't support copying image, please use save",{id:i}),u(!1)}})},saveImage:b,isPro:d,setTweet:w,tweet:f,fetchTweet:k,imageRef:a?.current})})]})}},60367:(e,t,a)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/templates/tweet-image",function(){return a(29006)}])}},e=>{e.O(0,[4558,1178,407,7880,9539,303,5177,1958,6394,5198,2075,2909,4510,636,6593,8792],()=>e(e.s=60367)),_N_E=e.O()}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.