diff --git a/config/nam.drsquatch.design.json b/config/nam.drsquatch.design.json new file mode 100644 index 0000000..ee63e68 --- /dev/null +++ b/config/nam.drsquatch.design.json @@ -0,0 +1,286 @@ +[ + { + "AnnouncementBanner": { + "props": { + "label": [ + { + "text": "BLACK FRIDAY PRE-SALE", + "className": " #b31b1f font-bold" + }, + { + "text": "FREE MYSTERY GIFT on $70", + "className": "" + }, + { + "text": "SHOP NOW", + "className": "font-bold text-sm underline" + } + ], + "className": "bg-[#b31b1f] text-white" + } + } + }, + { + "Nav": { + "props": { + "className": "bg-[#1f3621] text-white" + }, + "children": [ + { + "Div": { + "props": { + "className": "flex items-center h-full" + }, + "children": [ + { + "Image": { + "props": { + "src": "https://www.drsquatch.com/cdn/shop/files/2drsq_horiz_logo_white_3_1.svg?v=1743539246", + "alt": "Medusa Store", + "width": 120, + "height": 40, + "className": "cursor-pointer ml-8" + } + } + }, + { + "Div": { + "props": { + "className": "flex items-center h-full gap-16 font-bold" + }, + "children": [ + { + "DropdownMenus": { + "props": { + "label": "SUBCRIBE", + "className": "hover:underline flex items-center gap-2 ml-16", + "data-testid": "nav-categories-link", + "isShowArrow": false + }, + "children": [ + { + "DropdownMenuItems": { + "props": { + "label": "All Categories", + "className": "", + "data-testid": "nav-all-categories-link" + + } + } + }, + { + "DropdownMenuItems": { + "props": { + "label": "New Arrivals", + "className": "hover:underline flex items-center gap-2", + "data-testid": "nav-new-arrivals-link" + } + } + }, + { + "DropdownMenuItems": { + "props": { + "label": "Best Sellers", + "className": "hover:underline flex items-center gap-2", + "data-testid": "nav-best-sellers-link" + } + } + } + ] + } + }, + { + "DropdownMenus": { + "props": { + "label": "REWARD", + "className": "hover:underline flex items-center gap-2", + "data-testid": "nav-categories-link" + }, + "children": [ + { + "DropdownMenuItems": { + "props": { + "label": "All Categories", + "className": "hover:underline flex items-center gap-2", + "data-testid": "nav-all-categories-link" + } + } + }, + { + "DropdownMenuItems": { + "props": { + "label": "New Arrivals", + "className": "hover:underline flex items-center gap-2", + "data-testid": "nav-new-arrivals-link" + } + } + }, + { + "DropdownMenuItems": { + "props": { + "label": "Best Sellers", + "className": "hover:underline", + "data-testid": "nav-best-sellers-link" + } + } + } + ] + } + }, + { + "DropdownMenus": { + "props": { + "label": "SHOP", + "className": "hover:underline flex items-center gap-2", + "data-testid": "nav-categories-link", + "isShowArrow": false + }, + "children": [ + { + "DropdownMenuItems": { + "props": { + "label": "All Categories", + "className": "hover:underline", + "data-testid": "nav-all-categories-link" + } + } + }, + { + "DropdownMenuItems": { + "props": { + "label": "New Arrivals", + "className": "hover:underline", + "data-testid": "nav-new-arrivals-link" + } + } + }, + { + "DropdownMenuItems": { + "props": { + "label": "Best Sellers", + "className": "hover:underline", + "data-testid": "nav-best-sellers-link" + } + } + } + ] + } + }, + { + "DropdownMenus": { + "props": { + "label": "OUR STORY", + "className": "hover:underline flex items-center gap-2", + "data-testid": "nav-categories-link", + "isShowArrow": false + }, + "children": [ + { + "DropdownMenuItems": { + "props": { + "label": "OUR STORY", + "className": "hover:underline", + "data-testid": "nav-all-categories-link", + "isShowArrow": false + } + } + }, + { + "DropdownMenuItems": { + "props": { + "label": "New Arrivals", + "className": "hover:underline", + "data-testid": "nav-new-arrivals-link", + "isShowArrow": false + } + } + }, + { + "DropdownMenuItems": { + "props": { + "label": "Best Sellers", + "className": "hover:underline", + "data-testid": "nav-best-sellers-link", + "isShowArrow": false + } + } + } + ] + } + } + ] + } + } + ] + } + }, + { + "Div": { + "props": { + "className": "flex items-center gap-x-6 h-full justify-end" + }, + "children": [ + { + "SearchButton": { + "props": { + "className": "hover:underline hover:text-black flex items-center gap-2 text-white", + "data-testid": "nav-account-link" + } + } + }, + { + "UserButton": { + "props": { + "className": "hover:underline hover:text-black flex items-center gap-2 text-white", + "data-testid": "nav-account-link" + } + } + }, + { + "Suspense": { + "props": { + "fallback": [ + { + "LocalizedClientLink": { + "props": { + "href": "/cart", + "label": "Cart (0)", + "className": "hover:underline flex gap-2", + "data-testid": "nav-cart-link" + } + } + } + ] + }, + "children": [ + { + "CartButton": {} + } + ] + } + } + ] + } + } + ] + } + }, + { + "CartMismatchBanner": { + "show": true + } + }, + { + "FreeShippingPriceNudge": { + "variant": "popup" + } + }, + { + "PropsChildren": {} + }, + { + "Footer": { + "copyrightText": "© 2025 MyShop" + } + } +] diff --git a/src/modules/layout/templates/drsquatch-template/announcement-bar/index.tsx b/src/modules/layout/templates/drsquatch-template/announcement-bar/index.tsx new file mode 100644 index 0000000..30743c2 --- /dev/null +++ b/src/modules/layout/templates/drsquatch-template/announcement-bar/index.tsx @@ -0,0 +1,25 @@ + +type TextItem = { text: string; className?: string } + +export default async function AnnouncementBanner({ + className, + label, + ...props +}: { className: string; label: TextItem[] }) { + return ( +
+
+
+ + {label.map((item, index) => { + return ( +
+ {item.text} +
+ ) + })} +
+
+
+ ) +} \ No newline at end of file