diff --git a/config/nam.3bear.design.json b/config/nam.3bear.design.json index c017b62..f32909a 100644 --- a/config/nam.3bear.design.json +++ b/config/nam.3bear.design.json @@ -156,7 +156,7 @@ "href": "/" }, { - "icon": "https://upload.wikimedia.org/wikipedia/commons/8/88/Flag_of_Australia_%28converted%29.svg", + "icon": "https://cdn.shopify.com/s/files/1/0275/7784/3817/files/Australia_Flag.svg?v=1657674627", "text": "Australia (AUD)", "href": "/" } @@ -183,7 +183,7 @@ { "VtCartButton": { "config": { - "variant": "button", + "variant": "shoppingBagbutton", "className": "shadow-none" } } diff --git a/config/nam.drsquatch.design.json b/config/nam.drsquatch.design.json new file mode 100644 index 0000000..e896c2a --- /dev/null +++ b/config/nam.drsquatch.design.json @@ -0,0 +1,176 @@ +[ + { + "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" + } + } + } + ] + } + } + }, + { + "Nav": { + "config": { + "className": "h-24 bg-[#1f3521] text-white gap-12", + "left": [ + { + "Image": { + "config": { + "src": "/drsquatch-logo.webp", + "alt": "MyShop", + "className": "h-[150px] w-[180px] mr-24", + "objectFit": "contain" + } + } + }, + { + "Link": { + "config": { + "label": "SUBCRIBE", + "href": "/", + "className": "font-bold text-[1rem] text-white flex items-center mr-8 gap-1 hover:text-[#009b93]" + } + } + }, + { + "Link": { + "config": { + "label": "REWARD", + "href": "/", + "className": "font-bold text-[1rem] text-white flex items-center mr-8 gap-1 hover:text-[#009b93]" + } + } + }, + { + "VtMegaMenu": { + "config": { + "navLabel": { + "text": "SHOP", + "className": "font-bold text-[1rem] flex items-center mr-8 gap-1 hover:text-[#009b93]" + } + } + } + }, + { + "VtMegaMenu": { + "config": { + "navLabel": { + "text": "OUR STORY", + "className": "font-bold text-[1rem] text-white flex items-center mr-8 gap-1 hover:text-[#009b93]" + } + } + } + } + ], + "right": [ + { + "Dropdown": { + "config": { + "trigger": { + "icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Flag_of_Germany.svg/1200px-Flag_of_Germany.svg.png", + "text": "DE", + "className": "font-bold text-[1rem] text-white flex items-center gap-1 hover:text-[#009b93]", + "isShowArrow": true + }, + "items": [ + { + "icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Flag_of_Germany.svg/1200px-Flag_of_Germany.svg.png", + "text": "DE", + "href": "/" + }, + { + "icon": "https://cdn.shopify.com/s/files/1/0275/7784/3817/files/EU_Flag.svg?v=1652208424", + "text": "EU", + "href": "/" + }, + { + "icon": "https://cdn.shopify.com/s/files/1/0275/7784/3817/files/Australia_Flag.svg?v=1657674627", + "text": "AU", + "href": "/" + } + ] + } + } + }, + { + "IconButton": { + "config": { + "variant": "user", + "className": "shadow-none bg-transparent text-white" + } + } + }, + { + "VtCartButton": { + "config": { + "variant": "cartIconButton", + "className": "shadow-none bg-transparent text-white" + } + } + } + ] + } + } + } + ] + } + }, + { + "CartMismatchBanner": { + "config": { + "show": true + } + } + }, + { + "FreeShippingPriceNudge": { + "config": { + "variant": "popup" + } + } + }, + { + "PropsChildren": {} + }, + { + "Footer": { + "config": { + "copyrightText": "© 2025 MyShop" + } + } + } +] diff --git a/public/drsquatch-logo.webp b/public/drsquatch-logo.webp new file mode 100644 index 0000000..11ae0eb Binary files /dev/null and b/public/drsquatch-logo.webp differ diff --git a/src/modules/layout/components/vt-cartbutton/index.tsx b/src/modules/layout/components/vt-cartbutton/index.tsx index 1893c48..781b9c1 100644 --- a/src/modules/layout/components/vt-cartbutton/index.tsx +++ b/src/modules/layout/components/vt-cartbutton/index.tsx @@ -6,12 +6,17 @@ import { import { clx, IconButton } from "@medusajs/ui" import { Suspense } from "react" import CartButton from "@modules/layout/components/cart-button" -import { ShoppingBag } from "@medusajs/icons" +import { ShoppingBag, ShoppingCart } from "@medusajs/icons" -const CartIconButtonComponent = ({ className }: { className?: string }) => { +const IconButtonComponent = ({ className, variant }: { className?: string; variant?: "shoppingBag" | "cart" }) => { + const variants = { + shoppingBag: ShoppingBag, + cart: ShoppingCart, + } + const Icon = variants[variant ?? "shoppingBag"] return ( - + ) } @@ -28,7 +33,8 @@ export const VtCartButton = ({ const variants = { link: , - button: , + shoppingBagbutton: , + cartIconButton: , } if (!props.variant) return null const fallBackComp = variants[props.variant as keyof typeof variants] diff --git a/src/modules/layout/components/vt-mega-menu/mega-menu.tsx b/src/modules/layout/components/vt-mega-menu/mega-menu.tsx index b6cdd75..2bdf372 100644 --- a/src/modules/layout/components/vt-mega-menu/mega-menu.tsx +++ b/src/modules/layout/components/vt-mega-menu/mega-menu.tsx @@ -101,7 +101,7 @@ const MegaMenu = ({ key={category.id} href={`/categories/${category.handle}`} className={clx( - "hover:bg-neutral-100 hover:cursor-pointer rounded-full px-3 py-2 w-fit font-medium", + "hover:bg-neutral-100 text-black hover:cursor-pointer rounded-full px-3 py-2 w-fit font-medium", selectedCategory === category.id && "bg-neutral-100" )} onMouseEnter={() => handleCategoryHover(category.id)} diff --git a/src/modules/layout/templates/vt-banner/banner-nav.tsx b/src/modules/layout/templates/vt-banner/banner-nav.tsx index 361e8be..598c485 100644 --- a/src/modules/layout/templates/vt-banner/banner-nav.tsx +++ b/src/modules/layout/templates/vt-banner/banner-nav.tsx @@ -10,7 +10,7 @@ export default function BannerNav({ node, context }: { node: LayoutComponentDefi const props = node.config as BannerNavProps ?? {}; return ( -