https://tresjs.org/_nuxt/CebBi-ES.js

1import{_ as k}from"./BhSkxbDy.js";import{aw as x,aL as y,o as f,q as m,x as r,y as g,t as e,S as v,v as p,aD as _,aC as $,ar as b,ay as C,n as D,aI as B,j as w,aM as S,a3 as j,a4 as K}from"./Cr3hWB_6.js";import{_ as T}from"./DVXTL67c.js";import"./CmCc1J3L.js";const U={class:"w-full"},L=["src","alt"],P={class:"flex items-center justify-between pt-2"},z={class:"font-semibold text-gray-900 dark:text-white text-base"},J={class:"flex items-center"},I=x({__name:"DesignKitCard",props:{name:{},path:{},background:{},full:{type:Boolean}},setup(t){const i=y();function n(s,o){i.add({title:`${s.toUpperCase()} downloaded!`,description:`${o} ${s.toUpperCase()} file`,icon:"i-heroicons-arrow-down-tray",color:"info"})}return(s,o)=>{const a=k,l=_;return f(),m("div",U,[r(a,{ui:{body:t.full?"p-16 sm:p-16 ":"p-6 sm:p-6"},class:v(t.background)},{default:g(()=>[e("img",{src:`/design-kit/${t.path}.svg`,alt:t.name,class:v(["mx-auto",t.full?"h-10":"h-16"])},null,10,L)]),_:1},8,["ui","class"]),e("div",P,[e("h5",z,p(t.name),1),e("div",J,[r(l,{variant:"link",icon:"i-tabler-svg",size:"xl",to:`/design-kit/${t.path}.svg`,download:"",external:"","aria-label":"Download svg",onClick:o[0]||(o[0]=c=>n("svg",t.name))},null,8,["to"]),r(l,{variant:"link",icon:"i-tabler-png",size:"xl",to:`/design-kit/${t.path}.png`,download:"",external:"","aria-label":"Download png",onClick:o[1]||(o[1]=c=>n("png",t.name))},null,8,["to"])])])])}}}),N=Object.assign(I,{__name:"DesignKitCard"}),V={class:"w-full"},F={class:"flex h-32"},M=["title"],O={class:"w-16 flex flex-col"},q=["title"],A=["title"],E={class:"flex items-center justify-between pt-2"},H={class:"font-semibold text-gray-900 dark:text-white text-base"},R={class:"text-sm text-gray-600 dark:text-gray-400"},G={class:"flex items-center"},Q=x({__name:"DesignKitPalette",props:{color:{}},setup(t){const{copy:i}=$(),n=y();function s(o,a){i(o),n.add({title:`${a} color copied!`,description:o,icon:"i-heroicons-check-circle",color:"success"})}return(o,a)=>{const l=k,c=_;return f(),m("div",V,[r(l,{ui:{body:"p-0"}},{default:g(()=>[e("div",F,[e("div",{class:"flex-1 flex items-center justify-center cursor-pointer hover:opacity-90 transition-opacity",style:b({backgroundColor:t.color.main}),title:`Click to copy ${t.color.main}`,onClick:a[0]||(a[0]=d=>s(t.color.main,`${t.color.name} main`))},null,12,M),e("div",O,[e("div",{class:"flex-1 cursor-pointer hover:opacity-90 transition-opacity",style:b({backgroundColor:t.color.tint}),title:`Click to copy ${t.color.tint}`,onClick:a[1]||(a[1]=d=>s(t.color.tint,`${t.color.name} tint`))},null,12,q),e("div",{class:"flex-1 cursor-pointer hover:opacity-90 transition-opacity",style:b({backgroundColor:t.color.shade}),title:`Click to copy ${t.color.shade}`,onClick:a[2]||(a[2]=d=>s(t.color.shade,`${t.color.name} shade`))},null,12,A)])])]),_:1}),e("div",E,[e("div",null,[e("h5",H,p(t.color.name),1),e("p",R,p(t.color.hex),1)]),e("div",G,[r(c,{variant:"link",icon:"i-tabler-copy",size:"xl","aria-label":"Copy hex color",onClick:a[3]||(a[3]=d=>s(t.color.hex,`${t.color.name} hex`))})])])])}}}),W=Object.assign(Q,{__name:"DesignKitPalette"}),X={class:"grid min-h-dvh grid-cols-1 grid-rows-[1fr_1px_auto_1px_auto] justify-center [--gutter-width:2.5rem] lg:grid-cols-[var(--gutter-width)_minmax(0,var(--ui-container))_var(--gutter-width)] overflow-hidden"},Y={class:"row-span-full row-start-1 mb-32"},Z={class:"p-8 bg-neutral-50 dark:bg-neutral-800 relative after:w-[200vw] after:absolute after:bottom-0 after:h-px after:border-t after:border-dashed after:border-gray-200 dark:after:border-default after:-left-[100vw]"},tt={class:"flex flex-col sm:flex-row flex-wrap gap-4"},et={class:"grid grid-cols-1 gap-8 md:grid-cols-2"},ot={class:"grid grid-cols-1 gap-8 md:grid-cols-2"},at={class:"grid grid-cols-1 gap-8 md:grid-cols-3"},u="Design Kit",h="Design Kit of projects built with TresJS, the declarative ThreeJS framework for Vue",nt=x({__name:"design-kit",setup(t){const i=C();D({title:u}),B({title:u,description:h,ogTitle:u,ogDescription:h,ogImage:w(i.url,"/social/og-design-kit.png"),twitterTitle:u,twitterDescription:h,twitterImage:w(i.url,"/social/og-design-kit.png"),twitterCard:"summary_large_image"});const n=[{name:"Tres teal",main:"#82dbc5",tint:"#d3f4ea",shade:"#2ba189",hex:"#82DBC5"},{name:"Cientos yellow",main:"#fbb03b",tint:"#feeac7",shade:"#f47a0c",hex:"#FBB03B"}];return(s,o)=>{const a=N,l=T,c=W;return f(),m("div",X,[o[2]||(o[2]=e("div",{class:"hidden lg:block col-start-1 row-span-full row-start-1 pattern-bg border-r border-solid border-gray-100 dark:border-default"},null,-1)),e("div",Y,[o[0]||(o[0]=S('<header class="mt-24"><h1 class="mx-2 text-lg font-mono font-medium">Design Kit</h1></header><div class="relative before:absolute before:top-0 before:h-px before:w-[200vw] before:border-t before:border-dashed before:border-gray-200 dark:before:border-default before:-left-[100vw] after:w-[200vw] after:absolute after:bottom-0 after:h-px after:border-t after:border-dashed after:border-gray-200 dark:after:border-default after:-left-[100vw]"><h2 class="px-2 py-16 w-full sm:w-1/2 text-4xl tracking-tighter text-balance sm:text-5xl lg:text-6xl font-display font-extrabold"> TresJS <br> Brand <span class="text-primary-300">Assets</span></h2></div>',2)),e("div",Z,[e("div",tt,[r(l,{class:"w-full sm:w-[calc(40%-1rem)]",title:"Isotypes",description:"Download the TresJS isotypes in various formats.",icon:"i-tres-favicon"},{default:g(()=>[e("div",et,[r(a,{name:"Dark",path:"isotype-dark",background:"bg-white",full:!0}),r(a,{name:"Light",path:"isotype-light",background:"bg-neutral-800",full:!0})])]),_:1}),r(l,{title:"Color Palette",class:"w-full sm:w-[calc(60%)]",description:""},{default:g(()=>[e("div",ot,[(f(),m(j,null,K(n,d=>r(c,{key:d.name,color:d},null,8,["color"])),64))])]),_:1}),r(l,{title:"Logos",description:"Download the TresJS logos in various formats.",class:"w-full"},{default:g(()=>[e("div",at,[r(a,{name:"Dark",path:"logotype-dark",background:"bg-white",full:!0}),r(a,{name:"Light",path:"logotype-light",background:"bg-neutral-800",full:!0}),r(a,{name:"Bi-color Dark",path:"logotype-bicolor-dark",background:"bg-white",full:!0}),r(a,{name:"Bi-color Light",path:"logotype-bicolor-light",background:"bg-neutral-800",full:!0})])]),_:1})])]),o[1]||(o[1]=e("div",{class:"mt-8 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3"},null,-1))]),o[3]||(o[3]=e("div",{class:"row-span-full row-start-1 hidden lg:block pattern-bg border-l border-solid border-gray-100 dark:border-default"},null,-1))])}}});

1export{nt as default};