diff --git a/src/docs/src/lib/data/store.js b/src/docs/src/lib/data/store.js index b140f7d0e0e..ff158f97d3b 100644 --- a/src/docs/src/lib/data/store.js +++ b/src/docs/src/lib/data/store.js @@ -1,14 +1,80 @@ export const productCustomAttributes = [ { id: 244268, - screenshot: "https://img.daisyui.com/images/store/screenshots/nexus.webp", + media: [ + // { + // type: "video", + // url: "https://www.youtube.com/embed/ky18YtME8UQ", + // ratio: "16/9", + // }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/nexus/nexus-2.webp", + lg: "https://img.daisyui.com/images/store/large/nexus/nexus-2.webp", + original: "https://img.daisyui.com/images/store/screenshots/nexus.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/nexus/nexus-1.webp", + lg: "https://img.daisyui.com/images/store/large/nexus/nexus-1.webp", + original: "https://img.daisyui.com/images/store/screenshots/nexus.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/nexus/nexus-3.webp", + lg: "https://img.daisyui.com/images/store/large/nexus/nexus-3.webp", + original: "https://img.daisyui.com/images/store/screenshots/nexus.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/nexus/nexus-4.webp", + lg: "https://img.daisyui.com/images/store/large/nexus/nexus-4.webp", + original: "https://img.daisyui.com/images/store/screenshots/nexus.webp", + }, + ], tech: ["react", "nextjs"], preveiw_url: "https://nexus.daisyui.com/", tags: ["updated to v1.1"], }, { id: 284327, - screenshot: "https://img.daisyui.com/images/store/screenshots/documentation-template.webp", + media: [ + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/documentation/documentation-1.webp", + lg: "https://img.daisyui.com/images/store/large/documentation/documentation-1.webp", + original: + "https://img.daisyui.com/images/store/screenshots/documentation-template.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/documentation/documentation-2.webp", + lg: "https://img.daisyui.com/images/store/large/documentation/documentation-2.webp", + original: + "https://img.daisyui.com/images/store/screenshots/documentation-template.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/documentation/documentation-3.webp", + lg: "https://img.daisyui.com/images/store/large/documentation/documentation-3.webp", + original: + "https://img.daisyui.com/images/store/screenshots/documentation-template.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/documentation/documentation-4.webp", + lg: "https://img.daisyui.com/images/store/large/documentation/documentation-4.webp", + original: + "https://img.daisyui.com/images/store/screenshots/documentation-template.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/documentation/documentation-5.webp", + lg: "https://img.daisyui.com/images/store/large/documentation/documentation-5.webp", + original: + "https://img.daisyui.com/images/store/screenshots/documentation-template.webp", + }, + ], originalprice: 4900, displayprice: 2900, tech: ["astro", "nextjs", "mdx"], @@ -16,41 +82,321 @@ export const productCustomAttributes = [ }, { id: 142623, - screenshot: "https://img.daisyui.com/images/store/screenshots/saas-landingpage.webp", + media: [ + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/saas-landing/saas-landing-10.webp", + lg: "https://img.daisyui.com/images/store/large/saas-landing/saas-landing-10.webp", + original: + "https://img.daisyui.com/images/store/screenshots/saas-landingpage.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/saas-landing/saas-landing-9.webp", + lg: "https://img.daisyui.com/images/store/large/saas-landing/saas-landing-9.webp", + original: + "https://img.daisyui.com/images/store/screenshots/saas-landingpage.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/saas-landing/saas-landing-8.webp", + lg: "https://img.daisyui.com/images/store/large/saas-landing/saas-landing-8.webp", + original: + "https://img.daisyui.com/images/store/screenshots/saas-landingpage.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/saas-landing/saas-landing-7.webp", + lg: "https://img.daisyui.com/images/store/large/saas-landing/saas-landing-7.webp", + original: + "https://img.daisyui.com/images/store/screenshots/saas-landingpage.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/saas-landing/saas-landing-6.webp", + lg: "https://img.daisyui.com/images/store/large/saas-landing/saas-landing-6.webp", + original: + "https://img.daisyui.com/images/store/screenshots/saas-landingpage.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/saas-landing/saas-landing-5.webp", + lg: "https://img.daisyui.com/images/store/large/saas-landing/saas-landing-5.webp", + original: + "https://img.daisyui.com/images/store/screenshots/saas-landingpage.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/saas-landing/saas-landing-4.webp", + lg: "https://img.daisyui.com/images/store/large/saas-landing/saas-landing-4.webp", + original: + "https://img.daisyui.com/images/store/screenshots/saas-landingpage.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/saas-landing/saas-landing-3.webp", + lg: "https://img.daisyui.com/images/store/large/saas-landing/saas-landing-3.webp", + original: + "https://img.daisyui.com/images/store/screenshots/saas-landingpage.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/saas-landing/saas-landing-2.webp", + lg: "https://img.daisyui.com/images/store/large/saas-landing/saas-landing-2.webp", + original: + "https://img.daisyui.com/images/store/screenshots/saas-landingpage.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/saas-landing/saas-landing-1.webp", + lg: "https://img.daisyui.com/images/store/large/saas-landing/saas-landing-1.webp", + original: + "https://img.daisyui.com/images/store/screenshots/saas-landingpage.webp", + }, + ], tech: ["html", "react", "svelte", "vue", "alpine"], }, { id: 208203, - screenshot: "https://img.daisyui.com/images/store/screenshots/blog-template.webp", + media: [ + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/personal-blog/personal-blog-1.webp", + lg: "https://img.daisyui.com/images/store/large/personal-blog/personal-blog-1.webp", + original: + "https://img.daisyui.com/images/store/screenshots/blog-template.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/personal-blog/personal-blog-2.webp", + lg: "https://img.daisyui.com/images/store/large/personal-blog/personal-blog-2.webp", + original: + "https://img.daisyui.com/images/store/screenshots/blog-template.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/personal-blog/personal-blog-3.webp", + lg: "https://img.daisyui.com/images/store/large/personal-blog/personal-blog-3.webp", + original: + "https://img.daisyui.com/images/store/screenshots/blog-template.webp", + }, + ], tech: ["astro", "mdx"], tags: ["v1.1 released with new design"], }, { id: 185227, - screenshot: "https://img.daisyui.com/images/store/screenshots/app-landingpage.webp", + media: [ + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/mobile-app-landing/mobile-app-landing-7.webp", + lg: "https://img.daisyui.com/images/store/large/mobile-app-landing/mobile-app-landing-7.webp", + original: + "https://img.daisyui.com/images/store/screenshots/app-landingpage.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/mobile-app-landing/mobile-app-landing-1.webp", + lg: "https://img.daisyui.com/images/store/large/mobile-app-landing/mobile-app-landing-1.webp", + original: + "https://img.daisyui.com/images/store/screenshots/app-landingpage.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/mobile-app-landing/mobile-app-landing-2.webp", + lg: "https://img.daisyui.com/images/store/large/mobile-app-landing/mobile-app-landing-2.webp", + original: + "https://img.daisyui.com/images/store/screenshots/app-landingpage.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/mobile-app-landing/mobile-app-landing-3.webp", + lg: "https://img.daisyui.com/images/store/large/mobile-app-landing/mobile-app-landing-3.webp", + original: + "https://img.daisyui.com/images/store/screenshots/app-landingpage.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/mobile-app-landing/mobile-app-landing-4.webp", + lg: "https://img.daisyui.com/images/store/large/mobile-app-landing/mobile-app-landing-4.webp", + original: + "https://img.daisyui.com/images/store/screenshots/app-landingpage.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/mobile-app-landing/mobile-app-landing-5.webp", + lg: "https://img.daisyui.com/images/store/large/mobile-app-landing/mobile-app-landing-5.webp", + original: + "https://img.daisyui.com/images/store/screenshots/app-landingpage.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/mobile-app-landing/mobile-app-landing-6.webp", + lg: "https://img.daisyui.com/images/store/large/mobile-app-landing/mobile-app-landing-6.webp", + original: + "https://img.daisyui.com/images/store/screenshots/app-landingpage.webp", + }, + ], tech: ["html", "react", "svelte", "vue", "alpine"], }, { id: 144550, - screenshot: "https://img.daisyui.com/images/store/screenshots/agency-landingpage-react.webp", + media: [ + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/agency-landing/agency-landing-2.webp", + lg: "https://img.daisyui.com/images/store/large/agency-landing/agency-landing-2.webp", + original: + "https://img.daisyui.com/images/store/screenshots/agency-landingpage-react.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/agency-landing/agency-landing-1.webp", + lg: "https://img.daisyui.com/images/store/large/agency-landing/agency-landing-1.webp", + original: + "https://img.daisyui.com/images/store/screenshots/agency-landingpage-react.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/agency-landing/agency-landing-3.webp", + lg: "https://img.daisyui.com/images/store/large/agency-landing/agency-landing-3.webp", + original: + "https://img.daisyui.com/images/store/screenshots/agency-landingpage-react.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/agency-landing/agency-landing-4.webp", + lg: "https://img.daisyui.com/images/store/large/agency-landing/agency-landing-4.webp", + original: + "https://img.daisyui.com/images/store/screenshots/agency-landingpage-react.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/agency-landing/agency-landing-5.webp", + lg: "https://img.daisyui.com/images/store/large/agency-landing/agency-landing-5.webp", + original: + "https://img.daisyui.com/images/store/screenshots/agency-landingpage-react.webp", + }, + ], tech: ["react", "svelte", "vite", "framer"], }, { id: 130237, - screenshot: "https://img.daisyui.com/images/store/screenshots/auth.webp", + media: [ + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/auth/auth-1.webp", + lg: "https://img.daisyui.com/images/store/large/auth/auth-1.webp", + original: "https://img.daisyui.com/images/store/screenshots/auth.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/auth/auth-2.webp", + lg: "https://img.daisyui.com/images/store/large/auth/auth-2.webp", + original: "https://img.daisyui.com/images/store/screenshots/auth.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/auth/auth-3.webp", + lg: "https://img.daisyui.com/images/store/large/auth/auth-3.webp", + original: "https://img.daisyui.com/images/store/screenshots/auth.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/auth/auth-4.webp", + lg: "https://img.daisyui.com/images/store/large/auth/auth-4.webp", + original: "https://img.daisyui.com/images/store/screenshots/auth.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/auth/auth-5.webp", + lg: "https://img.daisyui.com/images/store/large/auth/auth-5.webp", + original: "https://img.daisyui.com/images/store/screenshots/auth.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/auth/auth-6.webp", + lg: "https://img.daisyui.com/images/store/large/auth/auth-6.webp", + original: "https://img.daisyui.com/images/store/screenshots/auth.webp", + }, + ], tech: ["html"], // ref: "VMAme", }, { id: 120591, - screenshot: "https://img.daisyui.com/images/store/screenshots/dashboard.webp", + media: [ + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/html-dashboard/html-dashboard-1.webp", + lg: "https://img.daisyui.com/images/store/large/html-dashboard/html-dashboard-1.webp", + original: + "https://img.daisyui.com/images/store/screenshots/dashboard.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/html-dashboard/html-dashboard-2.webp", + lg: "https://img.daisyui.com/images/store/large/html-dashboard/html-dashboard-2.webp", + original: + "https://img.daisyui.com/images/store/screenshots/dashboard.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/html-dashboard/html-dashboard-3.webp", + lg: "https://img.daisyui.com/images/store/large/html-dashboard/html-dashboard-3.webp", + original: + "https://img.daisyui.com/images/store/screenshots/dashboard.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/html-dashboard/html-dashboard-4.webp", + lg: "https://img.daisyui.com/images/store/large/html-dashboard/html-dashboard-4.webp", + original: + "https://img.daisyui.com/images/store/screenshots/dashboard.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/html-dashboard/html-dashboard-5.webp", + lg: "https://img.daisyui.com/images/store/large/html-dashboard/html-dashboard-5.webp", + original: + "https://img.daisyui.com/images/store/screenshots/dashboard.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/html-dashboard/html-dashboard-6.webp", + lg: "https://img.daisyui.com/images/store/large/html-dashboard/html-dashboard-6.webp", + original: + "https://img.daisyui.com/images/store/screenshots/dashboard.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/html-dashboard/html-dashboard-7.webp", + lg: "https://img.daisyui.com/images/store/large/html-dashboard/html-dashboard-7.webp", + original: + "https://img.daisyui.com/images/store/screenshots/dashboard.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/html-dashboard/html-dashboard-8.webp", + lg: "https://img.daisyui.com/images/store/large/html-dashboard/html-dashboard-8.webp", + original: + "https://img.daisyui.com/images/store/screenshots/dashboard.webp", + }, + { + type: "image", + sm: "https://img.daisyui.com/images/store/small/html-dashboard/html-dashboard-9.webp", + lg: "https://img.daisyui.com/images/store/large/html-dashboard/html-dashboard-9.webp", + original: + "https://img.daisyui.com/images/store/screenshots/dashboard.webp", + }, + ], tech: ["html", "webcomponents"], - originalprice: 2900, - displayprice: 2600, - displaypricenote: "with discount", - tags: ['Use code "DASHBOARD10" for 10% discount'], + // originalprice: 2900, + // displayprice: 2600, + // displaypricenote: "with discount", + // tags: ['Use code "DASHBOARD10" for 10% discount'], }, -] +]; export const tech = { html: { title: "HTML", bg: "#E54C20", fg: "#FFF" }, @@ -65,12 +411,12 @@ export const tech = { mdx: { title: "MDX", bg: "#0A69DA", fg: "#FFF" }, astro: { title: "Astro", bg: "#E944B0", fg: "#FFF" }, nextjs: { title: "Next.js", bg: "#000", fg: "#FFF" }, -} +}; -export const techFilters = ["all", "html", "react", "vue", "svelte", "astro"] +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", -] +]; diff --git a/src/docs/src/routes/(docs)/store/+page.svelte b/src/docs/src/routes/(docs)/store/+page.svelte index bd06b610109..4de5b25ea11 100644 --- a/src/docs/src/routes/(docs)/store/+page.svelte +++ b/src/docs/src/routes/(docs)/store/+page.svelte @@ -108,6 +108,16 @@ let sortedFilteredProducts = $derived( return 0 }) ) + +let sliders = $state(Object.fromEntries(data.products.map(product => [product.id, { currentIndex: 0 }]))); + +function next(productId, media) { + sliders[productId].currentIndex = (sliders[productId].currentIndex + 1) % media.length; +} + +function prev(productId, media) { + sliders[productId].currentIndex = (sliders[productId].currentIndex - 1 + media.length) % media.length; +} @@ -123,7 +133,7 @@ let sortedFilteredProducts = $derived(
Filter by
{#each data.techFilters as filter} - {#if + {#if // Show all options except "all" if no option is chosen (selectedTech === '' && filter !== 'all') || // Show all options if "all" is selected @@ -140,7 +150,7 @@ let sortedFilteredProducts = $derived( {#if filter === 'all'} - + {:else} {data.tech[filter].title} {/if} @@ -161,7 +171,7 @@ let sortedFilteredProducts = $derived(
- +

@@ -240,7 +250,7 @@ let sortedFilteredProducts = $derived(
- {#each sortedFilteredProducts as product} + {#each sortedFilteredProducts as product, index}
@@ -329,59 +339,87 @@ let sortedFilteredProducts = $derived( {/if}
- -
- - - - - - - - - - +
+
+ {#each product.media as media} +
+ {#if media.type === 'video'} +
+
+ +
+ {/if} + {#if media.type === 'image'} + +
+ + + + + + + + + + +
+ {product.attributes.name} + + {/if} +
+ {/each}
- {product.attributes.name} - + {#if product.media.length > 1} + + + {/if} +
{#if product.tech}
made with