From af3246770a9f9e1cb15245476ca8d68e9e853984 Mon Sep 17 00:00:00 2001 From: Nam Doan Date: Fri, 26 Dec 2025 10:25:11 +0700 Subject: [PATCH] feat: hovering thumbnail will jump to 2nd image thumbnail --- config/nam.3bear.design.json | 4 +- config/nam.drsquatch.design.json | 699 ++++++++---------- config/nam.vibentec.design.json | 32 + .../components/vt-thumbnail/index.tsx | 30 +- src/vibentec/configloader.ts | 2 +- 5 files changed, 367 insertions(+), 400 deletions(-) diff --git a/config/nam.3bear.design.json b/config/nam.3bear.design.json index ec41a35..60c3c86 100644 --- a/config/nam.3bear.design.json +++ b/config/nam.3bear.design.json @@ -103,8 +103,8 @@ "productCard": { "badgeText": "Bestseller", "card": "relative flex flex-col items-center bg-transparent shadow-none border-none p-0", - "badge": { "container": "absolute top-4 left-4", "text": "px-3 py-1 rounded-full bg-[#009b93] text-white text-[12px] font-semibold" }, - "thumbnail": { "className": "rounded-2xl bg-white h-[320px] object-contain", "size": "full" }, + "badge": { "container": "absolute top-0 left-0 z-[1]", "text": "px-3 py-1 rounded-full bg-[#009b93] text-white text-[12px] font-semibold" }, + "thumbnail": { "className": "rounded-2xl bg-white h-[320px] object-contain shadow-none", "size": "full" }, "content": "flex flex-col items-center justify-start text-center p-0 mt-6", "title": "text-[#003F31] text-[28px] font-semibold", "description": "order-3 text-[#003f31b3]", diff --git a/config/nam.drsquatch.design.json b/config/nam.drsquatch.design.json index 7722e5b..f0bd29b 100644 --- a/config/nam.drsquatch.design.json +++ b/config/nam.drsquatch.design.json @@ -1,415 +1,332 @@ -[ - { - "Header": { - "config": { - "sticky": true - }, - "children": [ - { - "Banner": { - "config": { - "variant": "nav", - "className": "h-12 bg-[#e6c981] text-black gap-12", - "center": [ - { - "Link": { - "config": { - "label": "BLACK FRIDAY", - "href": "/", - "className": "font-bold text-[1rem] flex items-center gap-1" - } - } - }, - { - "Link": { - "config": { - "label": "Up to 55% off Bundles", - "href": "/", - "className": "text-[1rem] flex items-center gap-1" - } - } - }, - { - "Link": { - "config": { - "label": "SHOP NOW", - "href": "/", - "className": "font-bold text-[1rem] flex items-center gap-1 underline" - } - } - } - ] - } - } +{ + "layout": [ + { + "Header": { + "config": { + "sticky": true }, - { - "Nav": { - "config": { - "className": "h-24 bg-[#1f3521] text-white gap-12", - "left": [ - { - "Logo": { - "config": { - "src": "/drsquatch-logo.webp", - "alt": "MyShop", - "className": "h-auto w-40 mr-24", - "objectFit": "contain" + "children": [ + { + "Banner": { + "config": { + "variant": "nav", + "className": "h-12 bg-[#e6c981] text-black gap-12", + "center": [ + { + "Link": { + "config": { + "label": "BLACK FRIDAY", + "href": "/", + "className": "font-bold text-[1rem] flex items-center gap-1" + } } - } - }, - { - "Link": { - "config": { - "label": "SUBCRIBE", - "href": "/", - "className": "font-bold text-[1rem] text-white flex items-center mr-8 gap-1 hover:underline hover:text-white" + }, + { + "Link": { + "config": { + "label": "Up to 55% off Bundles", + "href": "/", + "className": "text-[1rem] flex items-center gap-1" + } } - } - }, - { - "Link": { - "config": { - "label": "REWARD", - "href": "/", - "className": "font-bold text-[1rem] text-white flex items-center mr-8 gap-1 hover:underline hover:text-white" - } - } - }, - { - "VtMegaMenu": { - "config": { - "navLabel": { - "text": "SHOP", - "className": "font-bold text-[1rem] flex items-center mr-8 gap-1 hover:bg-transparent hover:underline hover:text-white" + }, + { + "Link": { + "config": { + "label": "SHOP NOW", + "href": "/", + "className": "font-bold text-[1rem] flex items-center gap-1 underline" } } } - }, - { - "VtMegaMenu": { - "config": { - "navLabel": { - "text": "OUR STORY", - "className": "font-bold text-[1rem] text-white flex items-center hover:bg-transparent hover:underline hover:text-white" + ] + } + } + }, + { + "Nav": { + "config": { + "className": "h-24 bg-[#1f3521] text-white gap-12", + "left": [ + { + "Logo": { + "config": { + "src": "/drsquatch-logo.webp", + "alt": "MyShop", + "className": "h-auto w-40 mr-24", + "objectFit": "contain" + } + } + }, + { + "Link": { + "config": { + "label": "SUBCRIBE", + "href": "/", + "className": "font-bold text-[1rem] text-white flex items-center mr-8 gap-1 hover:underline hover:text-white" + } + } + }, + { + "Link": { + "config": { + "label": "REWARD", + "href": "/", + "className": "font-bold text-[1rem] text-white flex items-center mr-8 gap-1 hover:underline hover:text-white" + } + } + }, + { + "VtMegaMenu": { + "config": { + "navLabel": { + "text": "SHOP", + "className": "font-bold text-[1rem] flex items-center mr-8 gap-1 hover:bg-transparent hover:underline hover:text-white" + } + } + } + }, + { + "VtMegaMenu": { + "config": { + "navLabel": { + "text": "OUR STORY", + "className": "font-bold text-[1rem] text-white flex items-center hover:bg-transparent hover:underline hover:text-white" + } } } } - } - ], - "right": [ - { - "VtCountryCodeSelect": { - "config": { - "trigger": { - "className": "w-auto font-bold text-[13px] text-white flex justify-start items-center gap-1 hover:text-[#009b93] bg-transparent shadow-none hover:bg-transparent", - "isFlag": true + ], + "right": [ + { + "VtCountryCodeSelect": { + "config": { + "trigger": { + "className": "w-auto font-bold text-[13px] text-white flex justify-start items-center gap-1 hover:text-[#009b93] bg-transparent shadow-none hover:bg-transparent", + "isFlag": true + } + } + } + }, + { + "Button": { + "config": { + "icon": "User", + "className": "shadow-none bg-transparent text-white hover:text-black" + } + } + }, + { + "VtCartButton": { + "config": { + "icon": "ShoppingCart", + "className": "shadow-none bg-transparent text-black w-[50px]" } } } - }, - { - "Button": { - "config": { - "icon": "User", - "className": "shadow-none bg-transparent text-white hover:text-black" - } - } - }, - { - "VtCartButton": { - "config": { - "icon": "ShoppingCart", - "className": "shadow-none bg-transparent text-black w-[50px]" - } - } - } - ] + ] + } } } + ] + } + }, + { "PropsChildren": {} }, + { + "Footer": { + "config": { + "className": "content-container border-none bg-[#1f3621] flex w-full border justify-between pb-8 gap-10 pt-16 px-[120px]", + "leftClassName": "flex ml-6 gap-x-24", + "centerClassName": "flex", + "rightClassName": "flex", + "left": [ + { + "VtMenuItem": { + "config": { + "title": "Help", + "className": "flex flex-col gap-y-2 text-[16px] font-semibold text-white gap-8", + "itemClassName": "text-[14px] font-[400] mt-3", + "items": [ + { "text": "FAQ", "href": "/" }, + { "text": "Track my order", "href": "/categories/shoes" }, + { "text": "Placeholder", "href": "/categories/accessories" }, + { "text": "Placeholder", "href": "/categories/accessories" }, + { "text": "Placeholder", "href": "/categories/accessories" }, + { "text": "Placeholder", "href": "/categories/accessories" } + ] + } + } + }, + { + "VtMenuItem": { + "config": { + "title": "Shop", + "className": "flex flex-col gap-y-2 text-[16px] font-semibold text-white", + "itemClassName": "text-[14px] font-[400] flex items-center mt-3", + "items": [ + { "text": "Twitter", "href": "/" }, + { "text": "Facebook", "href": "/categories/shoes" }, + { "text": "Pinterest", "href": "/categories/accessories" }, + { "text": "Placeholder", "href": "/categories/accessories" }, + { "text": "Placeholder", "href": "/categories/accessories" }, + { "text": "Placeholder", "href": "/categories/accessories" }, + { "text": "Placeholder", "href": "/categories/accessories" } + ] + } + } + }, + { + "VtMenuItem": { + "config": { + "title": "Info", + "className": "flex flex-col gap-y-2 text-[16px] font-semibold text-white", + "itemClassName": "text-[14px] font-[400] w-[200px] mt-3", + "items": [ + { "text": "The Squatch Difference", "href": "/" }, + { "text": "Why Natural Products", "href": "/categories/shoes" }, + { "text": "No Harmful Ingredients", "href": "/categories/accessories" } + ] + } + } + } + ], + "center": [ + { + "Logo": { + "config": { + "src": "/b-corp-logo.webp", + "alt": "MyShop", + "className": "h-auto w-[90px] mr-24", + "objectFit": "contain" + } + } + } + ], + "right": [ + { + "VtFooterSignUp": { + "config": { + "title": "Don't miss out on hot deals! Sign up and get up to 30% off.", + "className": "max-w-[760px]", + "titleClassName": "text-white text-[18px]", + "formClassName": "mt-2 w-full", + "inputClassName": "w-full", + "buttonClassName": "bg-[#C4622C] w-[90px]", + "socialsClassName": "mt-4 gap-8", + "socials": [ + { "icon": "Twitter", "href": "/", "className": "w-5 h-5 text-white" }, + { "icon": "Twitter", "href": "/", "className": "w-5 h-5 text-white" }, + { "icon": "Twitter", "href": "/", "className": "w-5 h-5 text-white" }, + { "icon": "Twitter", "href": "/", "className": "w-5 h-5 text-white" } + ] + } + } + } + ] } - ] + } + }, + { + "VtFooterBottom": { + "config": { + "className": "text-white text-[14px] font-[400] bg-[#1f3621] flex items-center justify-center", + "text": "©2025 Vibentec IT. All rights reserved", + "linksClassName": "flex items-center text-orange-500 mt-2 pl-2", + "links": [ + { "label": "Privacy Policy", "href": "/" }, + { "label": "Terms of Service", "href": "/categories/shoes" }, + { "label": "Cookie Policy", "href": "/categories/accessories" } + ] + } + } } - }, - { - "Hero": { - "config": { - "className": "h-[35rem]", - "ImageDisplayer": { + ], + "pages": { + "Home": [ + { + "Hero": { "config": { - "duration": 0, - "images": [ - "./drsquatch-banner.jpg" - ], - "links": [ - "/account" - ] - } - }, - "left": [ - { - "VtCtaBanner": { + "className": "h-[35rem]", + "ImageDisplayer": { "config": { - "variant": "default", - "className": "left-[120px] top-[120px] bg-transparent border-none text-white text-center", - "tagTextClassName": "text-white bg-transparent", - "titleTextClassName": "text-white font-bold leading-normal text-[30px]", - "descriptionTextClassName": "text-white text-[1rem] w-[300px] ml-[6.6rem]", - "buttonTextClassName": "text-white bg-orange-500 w-[300px]", - "tagText": "ALL NEW!", - "titleText": "LUMBERJACK LODGE", - "descriptionText": "Step into the lodge with the warm, sweet scent of maple and vanilla.", - "buttonText": "SHOP NOW" + "duration": 0, + "images": ["./drsquatch-banner.jpg"], + "links": ["/account"] } - } + }, + "left": [ + { + "VtCtaBanner": { + "config": { + "variant": "default", + "className": "left-[120px] top-[120px] bg-transparent border-none text-white text-center", + "tagTextClassName": "text-white bg-transparent", + "titleTextClassName": "text-white font-bold leading-normal text-[30px]", + "descriptionTextClassName": "text-white text-[1rem] w-[300px] ml-[6.6rem]", + "buttonTextClassName": "text-white bg-orange-500 w-[300px]", + "tagText": "ALL NEW!", + "titleText": "LUMBERJACK LODGE", + "descriptionText": "Step into the lodge with the warm, sweet scent of maple and vanilla.", + "buttonText": "SHOP NOW" + } + } + } + ], + "center": [], + "right": [] } - ], - "center": [], - "right": [] - } - } - }, - { - "VtFeaturedProducts": { - "config": { - "title": "drsquatch-best-seller", - "styles": { - "container": "content-container py-12 px-[100px] small:py-24", - - "header": { - "container": "flex justify-center mb-8", - "title": "text-[28px] font-bold text-[#1f3521]", - "isShowViewAll": false - }, - "list": "grid grid-cols-2 small:grid-cols-3 gap-x-6 gap-y-24 small:gap-y-36", - "productCard": { - "card": "shadow-none border-none", - "className": "relative overflow-hidden rounded-2xl bg-white shadow-elevation-card-rest h-full flex flex-col", - "badgeText": "LIMITED EDITION", - "badge": { - "container": "absolute z-[1] top-0 left-0 pt-4", - "text": "uppercase px-4 py-2 bg-[#3B6F47] text-white" - }, - "thumbnail": { - "className": "rounded-none h-[300px] shadow-none", - "size": "full" - }, - "content": " flex flex-col flex-1", - "title": "mt-2 text-[#1f3521] text-[22px] font-bold", - "price": "mt-2 text-[#3B6F47] font-bold text-[20px] flex gap-3 flex-row-reverse justify-end", - "reviews": { - "container": "mt-3 flex items-center gap-2", - "stars": "flex gap-1", - "star": "text-[#C4622C] text-xl leading-none", - "emptyStar": "text-[#C4622C] text-xl opacity-30 leading-none", - "text": "text-[#1f3521]", - "rating": 3.6, - "count": 59 - }, - "button": { - "addToCart": "mt-6 w-full bg-[#C4622C] hover:bg-[#C4622C]/90 shadow-none text-white rounded-none h-fit font-bold", - "moreInfo": "hidden" + } + }, + { + "VtFeaturedProducts": { + "config": { + "title": "drsquatch-best-seller", + "styles": { + "container": "content-container py-12 px-[100px] small:py-24", + "header": { + "container": "flex justify-center mb-8", + "title": "text-[28px] font-bold text-[#1f3521]", + "isShowViewAll": false + }, + "list": "grid grid-cols-2 small:grid-cols-3 gap-x-6 gap-y-24 small:gap-y-36", + "productCard": { + "card": "shadow-none border-none", + "className": "relative overflow-hidden rounded-2xl bg-white shadow-elevation-card-rest h-full flex flex-col", + "badgeText": "LIMITED EDITION", + "badge": { + "container": "absolute z-[1] top-0 left-0 pt-4", + "text": "uppercase px-4 py-2 bg-[#3B6F47] text-white" + }, + "thumbnail": { "className": "rounded-none h-[300px] shadow-none", "size": "full" }, + "content": " flex flex-col flex-1", + "title": "mt-2 text-[#1f3521] text-[22px] font-bold", + "price": "mt-2 text-[#3B6F47] font-bold text-[20px] flex gap-3 flex-row-reverse justify-end", + "reviews": { + "container": "mt-3 flex items-center gap-2", + "stars": "flex gap-1", + "star": "text-[#C4622C] text-xl leading-none", + "emptyStar": "text-[#C4622C] text-xl opacity-30 leading-none", + "text": "text-[#1f3521]", + "rating": 3.6, + "count": 59 + }, + "button": { + "addToCart": "mt-6 w-full bg-[#C4622C] hover:bg-[#C4622C]/90 shadow-none text-white rounded-none h-fit font-bold", + "moreInfo": "hidden" + } + } } } } - } - } - }, - { - "CartMismatchBanner": { - "config": { - "show": true - } - } - }, - { - "FreeShippingPriceNudge": { - "config": { - "variant": "popup" - } - } - }, - { - "PropsChildren": {} - }, - { - "Footer": { - "config": { - "className": "content-container border-none bg-[#1f3621] flex w-full border justify-between pb-8 gap-10 pt-16 px-[120px]", - "leftClassName": "flex ml-6 gap-x-24", - "centerClassName": "flex", - "rightClassName": "flex", - "left": [ - { - "VtMenuItem": { - "config": { - "title": "Help", - "className": "flex flex-col gap-y-2 text-[16px] font-semibold text-white gap-8", - "itemClassName": "text-[14px] font-[400] mt-3", - "items": [ - { - "text": "FAQ", - "href": "/" - }, - { - "text": "Track my order", - "href": "/categories/shoes" - }, - { - "text": "Placeholder", - "href": "/categories/accessories" - }, - { - "text": "Placeholder", - "href": "/categories/accessories" - }, - { - "text": "Placeholder", - "href": "/categories/accessories" - }, - { - "text": "Placeholder", - "href": "/categories/accessories" - } - ] - } - } - }, - { - "VtMenuItem": { - "config": { - "title": "Shop", - "className": "flex flex-col gap-y-2 text-[16px] font-semibold text-white", - "itemClassName": "text-[14px] font-[400] flex items-center mt-3", - "items": [ - { - "text": "Twitter", - "href": "/" - }, - { - "text": "Facebook", - "href": "/categories/shoes" - }, - { - "text": "Pinterest", - "href": "/categories/accessories" - }, - { - "text": "Placeholder", - "href": "/categories/accessories" - }, - { - "text": "Placeholder", - "href": "/categories/accessories" - }, - { - "text": "Placeholder", - "href": "/categories/accessories" - }, - { - "text": "Placeholder", - "href": "/categories/accessories" - } - ] - } - } - }, - { - "VtMenuItem": { - "config": { - "title": "Info", - "className": "flex flex-col gap-y-2 text-[16px] font-semibold text-white", - "itemClassName": "text-[14px] font-[400] w-[200px] mt-3", - "items": [ - { - "text": "The Squatch Difference", - "href": "/" - }, - { - "text": "Why Natural Products", - "href": "/categories/shoes" - }, - { - "text": "No Harmful Ingredients", - "href": "/categories/accessories" - } - ] - } - } - } - ], - "center": [ - { - "Logo": { - "config": { - "src": "/b-corp-logo.webp", - "alt": "MyShop", - "className": "h-auto w-[90px] mr-24", - "objectFit": "contain" - } - } - } - ], - "right": [ - { - "VtFooterSignUp": { - "config": { - "title": "Don't miss out on hot deals! Sign up and get up to 30% off.", - "className": "max-w-[760px]", - "titleClassName": "text-white text-[18px]", - "formClassName": "mt-2 w-full", - "inputClassName": "w-full", - "buttonClassName": "bg-[#C4622C] w-[90px]", - "socialsClassName": "mt-4 gap-8", - "socials": [ - { - "icon": "Twitter", - "href": "/", - "className": "w-5 h-5 text-white" - }, - { - "icon": "Twitter", - "href": "/", - "className": "w-5 h-5 text-white" - }, - { - "icon": "Twitter", - "href": "/", - "className": "w-5 h-5 text-white" - }, - { - "icon": "Twitter", - "href": "/", - "className": "w-5 h-5 text-white" - } - ] - } - } - } - ] - } - } - }, - { - "VtFooterBottom": { - "config": { - "className": "text-white text-[14px] font-[400] bg-[#1f3621] flex items-center justify-center", - "text": "©2025 Vibentec IT. All rights reserved", - "linksClassName": "flex items-center text-orange-500 mt-2 pl-2", - "links": [ - { - "label": "Privacy Policy", - "href": "/" - }, - { - "label": "Terms of Service", - "href": "/categories/shoes" - }, - { - "label": "Cookie Policy", - "href": "/categories/accessories" - } - ] - } - } + }, + { "CartMismatchBanner": { "config": { "show": true } } }, + { "FreeShippingPriceNudge": { "config": { "variant": "popup" } } } + ], + "Product": [ + { "VtFeaturedProducts": { "config": { "title": "drsquatch-best-seller" } } } + ], + "StorePage": [ + { "VtFeaturedProducts": { "config": { "title": "drsquatch-best-seller" } } } + ] } -] +} diff --git a/config/nam.vibentec.design.json b/config/nam.vibentec.design.json index c604faf..6fa233e 100644 --- a/config/nam.vibentec.design.json +++ b/config/nam.vibentec.design.json @@ -352,6 +352,38 @@ } } }, + { + "VtFeaturedProducts": { + "config": { + "title": "produkten", + "styles": { + "container": "content-container py-12 px-[100px] small:py-24", + "header": { + "container": "flex justify-between mb-8", + "title": "text-[56px] text-[#11314E]", + "isShowViewAll": false + }, + "list": "grid grid-cols-2 small:grid-cols-3 gap-x-6 gap-y-24 small:gap-y-36", + "productCard": { + "card": "relative overflow-hidden rounded-2xl border border-[#285A86] bg-ui-bg-base shadow-elevation-card-rest h-full flex flex-col", + "badge": { + "container": "p-4", + "text": "z-20 px-3 py-1 border-[0.5px] rounded bg-[#c9e0f5] txt-compact-small-plus shadow-borders-base text-[#285A86]" + }, + "thumbnail": { "className": "rounded-none h-[240px]", "size": "full" }, + "subtitle": "text-ui-fg-subtle text-[14px]", + "content": "flex flex-col flex-1 justify-between p-4", + "title": "text-ui-fg-subtle text-[18px]", + "price": "flex items-center gap-x-1 text-[#285A86] font-bold border-b pb-4", + "button": { + "addToCart": "w-fit h-[40px] bg-black text-white rounded-md", + "moreInfo": "w-fit h-[40px] border border-[#285A86] text-[#285A86] rounded-md" + } + } + } + } + } + }, { "CartMismatchBanner": { "config": { "show": true } } }, { "FreeShippingPriceNudge": { "config": { "variant": "popup" } } } ] diff --git a/src/modules/products/components/vt-thumbnail/index.tsx b/src/modules/products/components/vt-thumbnail/index.tsx index 728bef3..7d20d70 100644 --- a/src/modules/products/components/vt-thumbnail/index.tsx +++ b/src/modules/products/components/vt-thumbnail/index.tsx @@ -22,12 +22,18 @@ const VtThumbnail: React.FC = ({ className, "data-testid": dataTestid, }) => { - const initialImage = thumbnail || images?.[0]?.url + const imageUrls = images?.map((i: any) => i.url) || [] + const initialImage = thumbnail || imageUrls?.[0] + + let hoverImage: string | undefined = initialImage + if (imageUrls.length > 1) { + hoverImage = imageUrls.find((u) => u !== initialImage) + } return ( = ({ )} data-testid={dataTestid} > - + + {hoverImage && ( + + )} ) } @@ -49,19 +66,20 @@ const VtThumbnail: React.FC = ({ const ImageOrPlaceholder = ({ image, size, -}: Pick & { image?: string }) => { + className, +}: Pick & { image?: string; className?: string }) => { return image ? ( Thumbnail ) : ( -
+
) diff --git a/src/vibentec/configloader.ts b/src/vibentec/configloader.ts index 1759cee..5109633 100644 --- a/src/vibentec/configloader.ts +++ b/src/vibentec/configloader.ts @@ -2,7 +2,7 @@ import fs from "fs" import path from "path" import { jsonFileNames } from "./devJsonFileNames" -const fileName = jsonFileNames.nam3Bear +const fileName = jsonFileNames.namVibentec async function readDesignFile() { const filePath = path.join(process.cwd(), "config", fileName) -- 2.40.1