feat: create components and map with data json file of 3bear design

src/modules/layout/components/vt-mega-menu/index.tsx

@@ -1,19 +1,34 @@
-import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map";
-import React, { Suspense } from "react";
-import SkeletonMegaMenu from "@modules/skeletons/components/vt-skeleton-mega-menu";
-import MegaMenuWrapper from "@modules/layout/components/vt-mega-menu/mega-menu-wrapper";
+import {
+  LayoutComponentDefinition,
+  LayoutContext,
+} from "vibentec/component-map"
+import React, { Suspense } from "react"
+import SkeletonMegaMenu from "@modules/skeletons/components/vt-skeleton-mega-menu"
+import MegaMenuWrapper from "@modules/layout/components/vt-mega-menu/mega-menu-wrapper"
 
-export default function VtMegaMenu({ nodes, context }: { nodes: LayoutComponentDefinition; context: LayoutContext }) {
+interface MegaMenuProps {
+  navLabel: {
+    text: string
+    className?: string
+  }
+}
+export default function VtMegaMenu({
+  nodes,
+  context,
+}: {
+  nodes: LayoutComponentDefinition
+  context: LayoutContext
+}) {
+  const { navLabel } = nodes.config as MegaMenuProps ?? {}
   return (
     <nav>
       <ul className="space-x-4 hidden small:flex">
         <li>
           <Suspense fallback={<SkeletonMegaMenu />}>
-            <MegaMenuWrapper />
+            <MegaMenuWrapper navLabel={navLabel} />
           </Suspense>
         </li>
       </ul>
     </nav>
   )
 }
-

src/modules/layout/components/vt-mega-menu/mega-menu-wrapper.tsx

@@ -1,10 +1,12 @@
 import { listCategories } from "@lib/data/categories"
 import MegaMenu from "./mega-menu"
 
-export async function MegaMenuWrapper() {
+
+
+export async function MegaMenuWrapper({ navLabel }: { navLabel: { text: string; className?: string } }) {
   const categories = await listCategories().catch(() => [])
 
-  return <MegaMenu categories={categories} />
+  return <MegaMenu navLabel={navLabel} categories={categories} />
 }
 
 export default MegaMenuWrapper

src/modules/layout/components/vt-mega-menu/mega-menu.tsx

@@ -3,12 +3,16 @@
 import { HttpTypes } from "@medusajs/types"
 import { clx } from "@medusajs/ui"
 import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import ChevronDown from "@modules/common/icons/chevron-down"
 import { usePathname } from "next/navigation"
 import { useEffect, useState } from "react"
 
+
 const MegaMenu = ({
+  navLabel,
   categories,
 }: {
+  navLabel: { text: string; className?: string, isShowArrow?: boolean },
   categories: HttpTypes.StoreProductCategory[]
 }) => {
   const [isHovered, setIsHovered] = useState(false)
@@ -81,10 +85,13 @@ const MegaMenu = ({
         className="z-50"
       >
         <LocalizedClientLink
-          className="hover:text-ui-fg-base hover:bg-neutral-100 rounded-full px-3 py-2"
+          className={clx(
+            "hover:text-ui-fg-base hover:bg-neutral-100 rounded-full px-3 py-2",
+            navLabel.className
+          )}
           href="/store"
         >
-          Products
+          {navLabel.text} {navLabel.isShowArrow && <ChevronDown />}
         </LocalizedClientLink>
         {isHovered && (
           <div className="absolute top-full left-0 right-0 flex gap-32 py-10 px-20 bg-white border-b border-neutral-200 ">