(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[263],{29803:function(e,t,n){Promise.resolve().then(n.t.bind(n,19167,23)),Promise.resolve().then(n.bind(n,73840))},73840:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return TemplateDetails}});var a=n(26705),s=n(76168),o=n(3089),r=n(25241),i=n(86781),l=n(88031),c=n(12949),u=n(89509),p=n(88778),d=n(42744),m=n.n(d),h=n(71424);let ShareButton=e=>{let{children:t,icon:n,iconClassName:s="dark:group-hover/share-button:bg-slate-900/60 group-hover/share-button:bg-gray-30 group-hover/share-button:text-slate-800 dark:group-hover/share-button:text-slate-500",size:o,tag:r,className:i,...l}=e,c=r||"button";return(0,a.jsxs)(c,{className:m()("group/share-button text-base-medium flex flex-col items-center dark:text-gray-70 hover:text-black dark:hover:text-white transition-all",i),...l,children:[n&&(0,a.jsx)("span",{className:m()("inline-flex justify-center items-center transition-all duration-300 text-[22px] w-12 h-12 rounded-full bg-gray-30/70 dark:bg-slate-800 text-slate-600 dark:text-slate-600",s),children:(0,a.jsx)(n,{})}),t&&(0,a.jsx)("span",{className:"transition-all duration-300 group-hover/share-button:text-gray-600 group-hover/share-button:dark:text-white text-base-medium mt-3",children:t})]})},x={showLabel:!0};function ShareIcons(e){let{url:t,title:n,description:s,hashtags:o,showLabel:d=x.showLabel,source:m}=e,g=null==o?void 0:o.map(e=>"#".concat(e.replace(/\s/g,"_"))).join(" ");return(0,a.jsxs)("div",{className:"flex gap-3 md:gap-6 xl:gap-8",children:[(0,a.jsx)(i.CopyToClipboard,{text:t,onCopy:()=>h.A.success("Link is Copied"),children:(0,a.jsx)(ShareButton,{icon:l.JHN,iconClassName:"group-hover/share-button:bg-slate-700 group-hover/share-button:text-white dark:text-white",children:d&&"Link"})}),(0,a.jsx)(ShareButton,{tag:r.B,icon:u.AMt,iconClassName:"group-hover/share-button:bg-sky-500 group-hover/share-button:text-white dark:text-white",url:t,title:n,via:s,hashtags:o,children:d&&"Twitter X"}),(0,a.jsx)(ShareButton,{tag:r.Dk,icon:p.f1b,iconClassName:"group-hover/share-button:!bg-blue-600 group-hover/share-button:text-white dark:text-white",url:t,hashtag:g,children:d&&"Facebook"}),(0,a.jsx)(ShareButton,{tag:r.r2,icon:p.xQQ,iconClassName:"group-hover/share-button:!bg-blue-500 group-hover/share-button:text-white dark:text-white",url:t,title:n,summary:s,source:m||t,children:d&&"Linkedin"}),(0,a.jsx)(ShareButton,{tag:r.cG,icon:c.DIG,iconClassName:"group-hover/share-button:!bg-cyan-400 group-hover/share-button:text-white dark:text-white",url:t,subject:n,body:"".concat(s,' "').concat(t,'"'),children:d&&"Email"})]})}var g=n(75322),b=n(64922),v=n(61396),f=n.n(v),j=n(67997);let N=[{icon:b.ZP.exportJpgIcon,label:"JPG File"},{icon:b.ZP.exportHtmlIcon,label:"HTML File"},{icon:b.ZP.exportPdfIcon,label:"PDF File"},{icon:b.ZP.exportZipIcon,label:"ZIP File"},{icon:b.ZP.exportEpsIcon,label:"EPS File"},{icon:b.ZP.exportJsonIcon,label:"JSON File"}];function TemplateDetails(e){var t,n,r,i;let{template:l}=e,{setIsOpenPricingModal:u}=(0,g.useAppContext)();return(0,a.jsx)("section",{className:m()("pb-24"),children:(0,a.jsx)("div",{className:"container",children:(0,a.jsxs)("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-8",children:[(0,a.jsx)("div",{className:"border border-gray-30 rounded p-3",children:(0,a.jsx)("img",{src:l.thumbnailUrl||b.ZP.defaultTemplateThumbnail,alt:l.name,className:"w-full"})}),(0,a.jsx)("div",{children:(0,a.jsxs)("div",{className:"mt-4 sticky top-[120px]",children:[(null==l?void 0:l.isPremium)&&(0,a.jsx)("div",{className:"mb-4",children:(0,a.jsxs)("span",{className:"inline-flex items-center gap-2 bg-orange-100 text-black rounded-full uppercase px-4 h-[30px]",children:[(0,a.jsx)(j.SMW,{})," Premium"]})}),(0,a.jsx)("h2",{className:"text-lg-medium text-gray-600 mb-4 w-[400px]",children:"Customization the template according to your purpose"}),(null==l?void 0:l.isPremium)?(0,a.jsx)(o.Button,{onClick:()=>u(!0),className:"btn-lg bg-amber-400 text-black min-w-[200px]",icon:c.EMN,label:"Start Editing"}):(0,a.jsx)(o.Button,{tag:f(),href:"".concat("https://app.mailui.co","/create/").concat(l.slug),className:"btn-lg btn-primary min-w-[200px]",icon:c.EMN,label:"Start Editing"}),!!(null===(t=l.categories)||void 0===t?void 0:t.length)&&(0,a.jsxs)("div",{className:"mt-8",children:[(0,a.jsx)("h3",{className:"text-sm-semibold text-gray-600",children:"Categories"}),(0,a.jsx)("div",{className:"flex flex-wrap gap-2 mt-4",children:null===(n=l.categories)||void 0===n?void 0:n.map((e,t)=>(0,a.jsx)("span",{className:"px-4 py-1 border border-gray-30 rounded-full",children:e.name},t))})]}),(0,a.jsxs)("div",{className:m()((null===(r=l.categories)||void 0===r?void 0:r.length)?"mt-8":"mt-12"),children:[(0,a.jsx)("h3",{className:"text-sm-semibold text-gray-600",children:"Export Template As"}),(0,a.jsx)("div",{className:"flex flex-wrap gap-4 mt-4",children:N.map((e,t)=>(0,a.jsx)("div",{children:(0,a.jsx)(s.u,{content:e.label,children:(0,a.jsx)("img",{src:e.icon,alt:e.label,className:"h-[60px]"})})},t))})]}),(0,a.jsxs)("div",{className:"mt-8",children:[(0,a.jsx)("h3",{className:"text-sm-semibold text-gray-600 mb-4",children:"Share With"}),(0,a.jsx)(ShareIcons,{url:"".concat("https://mailui.co","/templates/").concat(l.slug),title:l.name,description:"Customization the template according to your purpose",hashtags:(null==l?void 0:l.categories)&&(null==l?void 0:null===(i=l.categories)||void 0===i?void 0:i.length)?null==l?void 0:l.categories.map(e=>e.name):[],showLabel:!0})]})]})})]})})})}},76168:function(e,t,n){"use strict";n.d(t,{u:function(){return Tooltip}});var a=n(26705),s=n(20955),o=n(42806),r=n(27039),i=n(42744),l=n.n(i);let c={className:"inline-flex",show:!0,placement:"top",offset:0},Tooltip=e=>{let{className:t=c.className,show:n=c.show,placement:i=c.placement,content:u,offset:p=c.offset,children:d}=e,[m,h]=(0,s.useState)(!1),{refs:x,floatingStyles:g,context:b}=(0,o.YF)({strategy:"fixed",open:m,onOpenChange:h,placement:i,whileElementsMounted:r.Me,middleware:[(0,r.cv)(5+p),(0,r.RR)({fallbackAxisSideDirection:"start"}),(0,r.uY)()]}),v=(0,o.XI)(b,{move:!1}),f=(0,o.KK)(b),j=(0,o.bQ)(b),N=(0,o.qs)(b,{role:"tooltip"}),{getReferenceProps:w,getFloatingProps:C}=(0,o.NI)([v,f,j,N]),y=s.Children.map(d,e=>s.isValidElement(e)?s.cloneElement(e,{ref:x.setReference,...w()}):e);return(0,a.jsxs)(a.Fragment,{children:[y,n&&(0,a.jsx)(o.ll,{children:m&&(0,a.jsx)("div",{className:l()("flex items-center flex-col gap-1 pointer-events-none z-[99]",{active:m},t),ref:x.setFloating,style:{...g,pointerEvents:"none"},...C(),children:(0,a.jsx)("div",{className:"bg-slate-700 text-white text-xs-medium px-3 py-2 rounded max-w-[200px]",children:(0,a.jsx)("div",{children:u})})})})]})}},3089:function(e,t,n){"use strict";n.r(t),n.d(t,{Button:function(){return r},ButtonComponent:function(){return ButtonComponent}});var a=n(26705);n(20955);var s=n(3190),o=n(19892);let ButtonComponent=e=>{let{tag:t="button",loading:n,className:r="btn-primary !px-8",disabled:i,children:l,icon:c,rightIcon:u,label:p,type:d="submit",labelClassName:m,...h}=e,{pending:x}=(0,s.experimental_useFormStatus)(),g=t||"button";return(0,a.jsxs)(g,{disabled:i||x||n,className:"group/btn btn ".concat(r),type:d,...h,children:[(x||n)&&(0,a.jsx)(o.$,{}),!x&&!n&&c&&(0,a.jsx)(c,{}),p&&(0,a.jsx)("span",{className:m,children:p}),u&&(0,a.jsx)(u,{}),l]})},r=Object.assign(ButtonComponent,{})},19892:function(e,t,n){"use strict";n.d(t,{$:function(){return Spinner}});var a=n(26705);n(20955);var s=n(42744),o=n.n(s);let Spinner=e=>{let{className:t}=e;return(0,a.jsxs)("svg",{className:o()("animate-spin",t),width:"1em",height:"1em",viewBox:"0 0 26 26",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[(0,a.jsx)("path",{d:"M13 23C18.5228 23 23 18.5228 23 13C23 7.47715 18.5228 3 13 3C7.47715 3 3 7.47715 3 13C3 18.5228 7.47715 23 13 23Z",stroke:"currentColor",style:{opacity:".7"},strokeWidth:"2"}),(0,a.jsx)("circle",{cx:"13",cy:"3",r:"3",fill:"currentColor"})]})}},75322:function(e,t,n){"use strict";n.r(t),n.d(t,{AppContext:function(){return o},AppProvider:function(){return AppProvider},useAppContext:function(){return useAppContext}});var a=n(26705),s=n(20955);let o=(0,s.createContext)(void 0),AppProvider=e=>{let{children:t}=e,[n,r]=(0,s.useState)(!1),[i,l]=(0,s.useState)(!1);return(0,a.jsx)(o.Provider,{value:{isOpenTemplateModal:n,setIsOpenTemplateModal:r,isOpenPricingModal:i,setIsOpenPricingModal:l},children:t})};function useAppContext(){let e=(0,s.useContext)(o);if(!e)throw Error("useAppContext should be used within the AppContext provider!");return e}},64922:function(e,t,n){"use strict";n.d(t,{jj:function(){return getMediaUrl}});let a="".concat("https://cdn.mailui.co"),getMediaUrl=e=>"".concat(a).concat(e);t.ZP={cardCornerShape:"".concat(a,"/assets/mailui_corner_shape.png"),defaultTemplateBanner:"".concat(a,"/assets/mailui_default_template_banner.png"),defaultCollectionBanner:"".concat(a,"/assets/mailui_default_collection_banner.png"),notFoundBanner:"".concat(a,"/assets/mailui-not-found.svg"),siteBanner:"".concat(a,"/assets/mailui-banner.png"),pluginScreen:"".concat(a,"/assets/mailui-builder-screen.png"),builderScreen:"".concat(a,"/assets/mailui-studio-template-editor.png"),frameDot:"".concat(a,"/assets/mailui_frame_dot.png"),polygonShape:"".concat(a,"/assets/mailui_polygon_bg_element.svg"),twoColorShape:"".concat(a,"/assets/mailui-two-color-shape.png"),twoColorShape2:"".concat(a,"/assets/mailui-two-color-shape-2.png"),defaultTemplateThumbnail:"".concat(a,"/assets/mailui-default-template-thumbnail.png"),defaultBlogThumbnail:"".concat(a,"/assets/mailui_default_collection_banner.png"),exportHtmlIcon:"".concat(a,"/assets/icons/mailui-html.png"),exportJpgIcon:"".concat(a,"/assets/icons/mailui-jpg.png"),exportPdfIcon:"".concat(a,"/assets/icons/mailui-pdf.png"),exportJsonIcon:"".concat(a,"/assets/icons/mailui-json.png"),exportEpsIcon:"".concat(a,"/assets/icons/mailui-eps.png"),exportZipIcon:"".concat(a,"/assets/icons/mailui-zip.png")}}},function(e){e.O(0,[3665,6950,614,7675,1779,9366,2402,2806,9007,4121,5290,1744],function(){return e(e.s=29803)}),_N_E=e.O()}]);