import{At as e,C as t,K as n,Ot as r,S as i,T as a,Tt as o,U as s,_ as c,at as l,c as u,g as d,gt as f,h as p,jt as m,u as h,v as g,y as _}from"./D2zWjF09.js";import{Vt as v,pt as y}from"./C-b6hTTf.js";import{D as b,h as x,n as S,t as C,v as w}from"./Co3OAyKc.js";import{t as T}from"./CHHO6nw6.js";import{a as E}from"#entry";import{n as D,t as O}from"./Bo4lSgm2.js";var k={class:`template-card group`},A={class:`template-header`},j={class:`template-footer`},M={key:0,class:`template-credit`},N=Object.assign(T(a({__name:`TemplateComponentPreview`,props:{src:{},aspectRatio:{},component:{},active:{type:Boolean},imageFormat:{},width:{},height:{}},setup(n){let a=n,h=/>/g;function y(){S.value?.devtools.rpc.openInEditor(a.component.path)}let C=p(()=>a.src.includes(`.html`)),T=p(()=>a.component.credits?.split(`<`)[0]?.trim()),E=p(()=>a.component.credits?.split(`<`)[1]?.trim().replace(h,``)),N=f();return(a,f)=>{let p=x,h=b,S=D,P=O,F=w;return s(),_(`div`,k,[d(`div`,A,[t(p,{to:E.value,target:`_blank`,class:`template-name`},{default:l(()=>[i(m(n.component.pascalName),1)]),_:1},8,[`to`])]),d(`div`,{class:r([`template-preview`,n.active?`is-active`:``])},[t(F,{text:`Preview ${n.component.pascalName} for the current page.`},{default:l(()=>[d(`div`,{class:`template-image`,style:e({aspectRatio:n.aspectRatio})},[n.active?(s(),c(h,{key:0,name:`carbon:checkmark-filled`,class:`active-badge`})):g(``,!0),C.value?(s(),c(P,{key:2,src:n.src,class:`pointer-events-none`,"aspect-ratio":n.aspectRatio,onLoad:f[1]||=e=>N.value=e},null,8,[`src`,`aspect-ratio`])):(s(),c(S,{key:1,src:o(v)(n.src,{component:n.component.pascalName}),"aspect-ratio":n.aspectRatio,class:`w-full h-full`,onLoad:f[0]||=e=>N.value=e},null,8,[`src`,`aspect-ratio`]))],4)]),_:1},8,[`text`])],2),d(`div`,j,[t(F,{text:`Open the source code of ${n.component.pascalName}.vue in your IDE`},{default:l(()=>[t(p,{class:`template-action`,onClick:u(y,[`stop`])},{default:l(()=>[t(h,{name:`carbon:code`,class:`w-3 h-3`}),f[2]||=i(` View source `,-1)]),_:1})]),_:1},8,[`text`]),n.component.credits?(s(),_(`div`,M,[E.value?(s(),c(p,{key:0,to:E.value,target:`_blank`},{default:l(()=>[i(m(T.value),1)]),_:1},8,[`to`])):g(``,!0)])):g(``,!0)])])}}}),[[`__scopeId`,`data-v-20711018`]]),{__name:`TemplateComponentPreview`}),P={class:`templates-page animate-fade-up`},F={key:0,class:`loading-container`},I={key:1,class:`templates-content stagger-children`},L={class:`template-grid`},R=[`onClick`],z={class:`template-grid`},B=[`onClick`],V=T(a({__name:`templates`,setup(e){let{appComponents:r,communityComponents:a,activeComponentName:u,src:f,aspectRatio:p,isLoading:m,patchOptions:b}=C();async function x(e){b({component:e}),await y(`/`)}return(e,y)=>{let b=N,S=E;return s(),_(`div`,P,[o(m)?(s(),_(`div`,F,[...y[0]||=[d(`div`,{class:`loading-spinner`},null,-1),d(`p`,{class:`loading-text`},` Loading templates… `,-1)]])):(s(),_(`div`,I,[o(r).length?(s(),c(S,{key:0,icon:`carbon:app`,text:`Your Templates`},{description:l(()=>[...y[1]||=[i(` Custom OG Image components in your project `,-1)]]),default:l(()=>[d(`div`,L,[(s(!0),_(h,null,n(o(r),e=>(s(),_(`button`,{key:e.pascalName,class:`template-item`,onClick:t=>x(e.pascalName)},[t(b,{component:e,src:o(v)(o(f),{component:e.pascalName}),"aspect-ratio":o(p),active:e.pascalName===o(u)},null,8,[`component`,`src`,`aspect-ratio`,`active`])],8,R))),128))])]),_:1})):g(``,!0),t(S,{icon:`carbon:user-multiple`,text:`Community Templates`},{description:l(()=>[...y[2]||=[i(` Pre-built templates you can use or eject `,-1)]]),default:l(()=>[d(`div`,z,[(s(!0),_(h,null,n(o(a),e=>(s(),_(`button`,{key:e.pascalName,class:`template-item`,onClick:t=>x(e.pascalName)},[t(b,{component:e,src:o(v)(o(f),{component:e.pascalName}),"aspect-ratio":o(p),active:e.pascalName===o(u)},null,8,[`component`,`src`,`aspect-ratio`,`active`])],8,B))),128))])]),_:1})]))])}}}),[[`__scopeId`,`data-v-6c5c4c86`]]);export{V as default};