feat: created Drsquatch header component and json file

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 (
     <IconButton className={className}>
-      <ShoppingBag />
+      <Icon />
     </IconButton>
   )
 }
@@ -28,7 +33,8 @@ export const VtCartButton = ({
 
   const variants = {
     link: <CartButton />,
-    button: <CartIconButtonComponent className={className} />,
+    shoppingBagbutton: <IconButtonComponent className={className} variant="shoppingBag" />,
+    cartIconButton: <IconButtonComponent className={className} variant="cart" />,
   }
   if (!props.variant) return null
   const fallBackComp = variants[props.variant as keyof typeof variants]

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)}

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 (
-    <nav className="content-container txt-xsmall-plus text-ui-fg-subtle flex items-center justify-between w-full h-full text-small-regular">
+    <nav className="content-container txt-xsmall-plus flex items-center justify-between w-full h-full text-small-regular">
       <div className="flex items-center gap-x-4">
         {props.left && <DynamicLayoutRenderer nodes={props.left} context={context} />}
       </div>

src/modules/layout/templates/vt-nav/index.tsx

@@ -1,5 +1,6 @@
 import { DynamicLayoutRenderer } from "vibentec/renderer"
 import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map";
+import { clx } from "@medusajs/ui";
 
 interface BannerNavProps {
   className?: string;
@@ -12,7 +13,7 @@ export default function VtNav({ nodes, context }: { nodes: LayoutComponentDefini
 
   return (
     <div className="relative mx-auto border-b duration-200 bg-white border-ui-border-base">
-      <nav className="content-container txt-xsmall-plus text-ui-fg-subtle flex items-center justify-between w-full h-full text-small-regular">
+      <nav className={clx("content-container txt-xsmall-plus flex items-center justify-between w-full h-full text-small-regular", props.className)}>
         <div className="flex items-center gap-x-4">
           {props.left && <DynamicLayoutRenderer nodes={props.left} context={context} />}
         </div>

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.namDrsquatch;
 
 export async function loadDesignConfig() {
   const filePath = path.join(process.cwd(), "config", fileName)

src/vibentec/devJsonFileNames.ts

@@ -2,4 +2,5 @@ export const jsonFileNames = {
   steMedusaStarter: "ste.medusa-starter.design.json",
   stePlayGround: "ste.playground.design.json",
   nam3Bear: "nam.3bear.design.json",
+  namDrsquatch: "nam.drsquatch.design.json",
 };