Skip to content

Commit

Permalink
store
Browse files Browse the repository at this point in the history
  • Loading branch information
@saadeghi
saadeghi committed Sep 15, 2024
1 parent a592518 commit 2bd5177
Show file tree
Hide file tree
Showing 4 changed files with 125 additions and 22 deletions.
48 changes: 46 additions & 2 deletions src/docs/src/components/ComponentFooter.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -294,7 +294,7 @@ $: currentPageIndex = arrayOfPagesInOrder.findIndex((item) => item.href === $pag
<img
class="pointer-events-none"
alt="daisyUI store"
src="https://img.daisyui.com/images/store/nexus.webp" />
src="https://img.daisyui.com/images/store/figma.webp" />
</figure>
<div
class="bg-accent -left-1/5 pointer-events-none absolute bottom-[-50%] aspect-square w-3/4 -translate-x-1/2 rounded-full opacity-20 blur-3xl">
Expand All @@ -305,7 +305,7 @@ $: currentPageIndex = arrayOfPagesInOrder.findIndex((item) => item.href === $pag
<div
class="bg-base-100 pointer-events-none absolute -top-3/4 right-1/4 z-[3] aspect-square w-1/2 rounded-full opacity-60 blur-3xl">
</div>
<div class="card-body relative isolate z-[3]">
<!-- <div class="card-body relative isolate z-[3]">
<h2
class="card-title text-base-content text-xl contrast-200 [text-wrap:balance] sm:w-[250%] sm:text-2xl md:text-4xl lg:text-3xl xl:text-4xl">
<span>
Expand Down Expand Up @@ -350,5 +350,49 @@ $: currentPageIndex = arrayOfPagesInOrder.findIndex((item) => item.href === $pag
</path>
</svg>
</a>
</div> -->
<div class="card-body relative isolate z-[3]">
<h2
class="card-title text-base-content text-xl contrast-200 [text-wrap:balance] sm:w-[250%] sm:text-2xl md:text-4xl lg:text-3xl xl:text-4xl">
<span>
<span class="font-black">Official daisyUI</span>
<br />
<span class="font-black">
Figma Library
</span>
</span>
</h2>
<div class="grow">
<h2
class="card-title text-sm font-light sm:w-[250%] sm:text-lg md:text-lg lg:text-lg xl:text-xl">
<svg
class="inline h-4 w-4 md:h-6 md:w-6"
width="32"
height="32"
viewBox="0 0 415 415"
xmlns="http://www.w3.org/2000/svg">
<rect x="82.5" y="290" width="250" height="125" rx="62.5" fill="#1AD1A5"></rect>
<circle cx="207.5" cy="135" r="125" fill="white"></circle>
<circle cx="207.5" cy="135" r="56" fill="#FF9903"></circle>
</svg>
Available on daisyUI store
</h2>
</div>
<a class="btn btn-block btn-primary group" href="/store">
More details
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hidden h-6 w-6 transition-transform duration-300 group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1 md:inline-block">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3">
</path>
</svg>
</a>
</div>
</div>
19 changes: 11 additions & 8 deletions src/docs/src/components/TopBanner.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,21 +12,24 @@ const dateFormat = {
</script>

<!-- Without timer -->
{#if false}
{#if true}
<div class="bg-base-100 flex justify-center rounded-sm p-1">
<a
href="/discord/"
href="/store/"
target="_blank"
class="alert hover:bg-base-300 hover:border-base-300 group flex w-auto max-w-xl justify-center rounded-full p-2 px-6 text-center text-xs transition-colors duration-300 ease-out">
<p class="inline-flex items-center justify-center gap-3 leading-relaxed">
<svg class="inline-block shrink-0" width="16px" height="16px" viewBox="0 -28.5 256 256">
<path
d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z"
fill="currentColor">
</path>
<svg width="16px" height="16px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd" transform="translate(4)">
<circle cx="12" cy="12" r="4" fill="#19BCFE"/>
<path fill="#09CF83" d="M4,24 C6.209139,24 8,22.209139 8,20 C8,19.3969461 8,18.0636128 8,16 C6.20303877,16 4.86970543,16 4,16 C1.790861,16 0,17.790861 0,20 C0,22.209139 1.790861,24 4,24 Z"/>
<path fill="#A259FF" d="M4,16 C4.73637967,16 6.069713,16 8,16 L8,8 C6.069713,8 4.73637967,8 4,8 C1.790861,8 0,9.790861 0,12 C0,14.209139 1.790861,16 4,16 Z"/>
<path fill="#F24E1E" d="M4,8 C4.73637967,8 6.069713,8 8,8 L8,0 C6.069713,0 4.73637967,0 4,0 C1.790861,0 0,1.790861 0,4 C0,6.209139 1.790861,8 4,8 Z"/>
<path fill="#FF7262" d="M12,8 L8,8 L8,8 L8,0 L12,0 L12,0 C14.209139,0 16,1.790861 16,4 C16,6.209139 14.209139,8 12,8 Z"/>
</g>
</svg>
<span class="text-base-content/70 group-hover:text-base-content [text-wrap:balance]">
daisyUI discord server is open! Join us for discussions, support, and updates.
Official daisyUI Figma Library is now available for designers!
</span>
</p>
</a>
Expand Down
31 changes: 28 additions & 3 deletions src/docs/src/lib/data/store.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,30 @@ export const productCustomAttributes = [
lg: "https://img.daisyui.com/images/store/large/daisyui-figma-file/figma-file.webp",
},
],
quote: {
img: "https://img.daisyui.com/images/profile/people/pouya-saadeghi.webp",
name: "Pouya",
text: [
[
"Save thousands of hours by avoiding the time consuming task of creating all the components and variants.",
],
[
"After half a year of development, The Official daisyUI Figma Library is now available for designers in Figma!",
"This <b>fully tokenized</b> Figma file includes all daisyUI <b>components</b>, <b>theme colors</b>, <b>variables</b> and <b>variants</b>.",
"A game-changer for designers and developers to use the same design system in both Figma and CSS.",
],
],
},
preveiw: {
button: "Preview",
url: "https://nexus.daisyui.com/",
},
preveiw_modal: {
button: "All Features",
img: "https://img.daisyui.com/images/store/official-daisyui-figma-library-price.webp",
},
tags: ["NEW"],
ref: "VMAme",
ref: "8XWm0",
params: "desc=0",
},
{
Expand Down Expand Up @@ -68,7 +90,10 @@ export const productCustomAttributes = [
],
screenshot: "https://img.daisyui.com/images/store/screenshots/nexus.webp",
tech: ["react", "nextjs"],
preveiw_url: "https://nexus.daisyui.com/",
preveiw: {
button: "Live demo",
url: "https://nexus.daisyui.com/",
},
tags: ["updated to v1.1"],
params: "desc=0",
},
Expand Down Expand Up @@ -381,7 +406,7 @@ export const tech = {
export const techFilters = ["all", "html", "react", "vue", "svelte", "astro"];

export const futureProducts = [
"Official daisyUI Figma Library",
"Headless UI + daisyUI component pack for React",
"Headless UI + daisyUI component pack for Vue",
"Ecommerce template",
];
49 changes: 40 additions & 9 deletions src/docs/src/routes/(docs)/store/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -258,7 +258,7 @@ function prev(productId, media) {
<div
class="rounded-box relative grid grid-cols-12 gap-y-10 py-10 xl:gap-x-10"
id="{product.id}">
<div class="col-span-12 row-start-2 flex flex-col gap-8 xl:col-span-5 xl:row-start-1">
<div class="col-span-12 flex flex-col gap-8 xl:col-span-5 xl:row-start-1">
<div>
{#if product.tags}
<span class="flex gap-2">
Expand All @@ -267,7 +267,7 @@ function prev(productId, media) {
{/each}
</span>
{/if}
<h2 class="font-title text-lg font-black [text-wrap:balance] sm:text-3xl xl:text-5xl">
<h2 class="font-title text-lg font-black [text-wrap:balance] sm:text-3xl tracking-tight" class:xl:text-6xl={index===0} class:xl:text-5xl={index>0}>
{product.attributes.name}
</h2>
</div>
Expand Down Expand Up @@ -328,11 +328,24 @@ function prev(productId, media) {
</path>
</svg>
</a>
{#if product.preveiw_url}
<a class="link text-xs" href="{product.preveiw_url}" target="_blank">
Live Preview
</a>
{/if}
<div class="flex gap-x-4">
{#if product.preveiw}
<a class="link text-xs" href="{product.preveiw.url}" target="_blank">
{product.preveiw.button}
</a>
{/if}
{#if product.preveiw_modal}
<button class="link text-xs" onclick="{() => preveiw_modal.showModal()}">{product.preveiw_modal.button}</button>
<dialog id="preveiw_modal" class="modal">
<div class="modal-box p-0 shadow-none bg-transparent max-w-fit max-h-fit my-32">
<img src="{product.preveiw_modal.img}" alt="{product.attributes.name}" class="max-h-screen w-auto" />
</div>
<form method="dialog" class="modal-backdrop">
<button>close</button>
</form>
</dialog>
{/if}
</div>
</div>
</div>
{#if product.attributes.description}
Expand All @@ -342,7 +355,7 @@ function prev(productId, media) {
</div>
{/if}
</div>
<div class="col-span-12 row-start-1 flex flex-col gap-6 xl:col-span-7">
<div class="col-span-12 flex flex-col gap-6 xl:col-span-7">
<div class="relative grid items-center group place-items-center [grid-template-columns:min-content_1fr_min-content] border border-base-300 rounded-box overflow-hidden">
<div class="col-span-3 col-start-1 row-start-1 flex overflow-hidden items-center rounded-box">
{#each product.media as media}
Expand All @@ -352,7 +365,7 @@ function prev(productId, media) {
{#if media.type === 'video'}
<div class="w-full grid">
<div class="[grid-column:1/1] [grid-row:1/1] z-[1]"></div>
<iframe class="w-full [grid-column:1/1] [grid-row:1/1]" src="{media.url}" frameborder="0" style={`aspect-ratio: ${media.ratio};`}></iframe>
<iframe class="w-full [grid-column:1/1] [grid-row:1/1]" style={`aspect-ratio: ${media.ratio};`} src="{media.url}" frameborder="0" title="Official daisyUI Figma Library" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
{/if}
{#if media.type === 'image'}
Expand Down Expand Up @@ -441,6 +454,24 @@ function prev(productId, media) {
{/each}
</div>
{/if}
{#if product.quote}
<div class="chat chat-end">
{#each product.quote.text as text, index}
<div class={`chat-bubble mt-1 text-xs max-w-md bg-base-200 text-base-content ${index !== product.quote.text.length - 1 ? "before:hidden [.chat-end>&]:rounded-box":""}`}>
{#each text as line}
<p class="py-1">{@html line}</p>
{/each}
</div>
{/each}
<div class="chat-image avatar tooltip" data-tip="{product.quote.name}">
<div class="w-10 rounded-full">
<img
alt="{product.quote.name}"
src="{product.quote.img}" />
</div>
</div>
</div>
{/if}
</div>
</div>
{:else}
Expand Down

0 comments on commit 2bd5177

Please sign in to comment.