feat: reuse country select and refactor some component

2025-12-08 11:39:41 +07:00
parent d8e78b71e4
commit f869d12c7a
6 changed files with 271 additions and 16 deletions
@@ -0,0 +1,56 @@
+"use client"
+import {
+  LayoutComponentDefinition,
+  LayoutContext,
+} from "@vibentec/component-map"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import * as MedusaIcons from "@medusajs/icons"
+import * as CustomIcons from "@modules/common/icons"
+export default function VtMenuItem({
+  nodes,
+  context,
+}: {
+  nodes: LayoutComponentDefinition
+  context: LayoutContext
+}) {
+  const props = nodes.config ?? {}
+  const title = props.title ?? ""
+  const items = props.items ?? []
+  const icon = props.icon ?? ""
+
+  const getIconComponent = (icon: string | undefined) => {
+    return icon
+      ? (MedusaIcons as Record<string, any>)[icon] ??
+        (CustomIcons as Record<string, any>)[icon]
+      : undefined
+  }
+  return (
+    <div className={props.className ?? "flex flex-col gap-y-2"}>
+      <span>{title}</span>
+      <ul className="grid grid-cols-1 gap-2" data-testid="footer-categories">
+        {items.map((item: { text: string; href?: string; icon?: string }, index: number) => {
+          const Icon = getIconComponent(item.icon)
+          return (
+            <li
+              key={`${item.text}-${index}`}
+              className={props.itemClassName ?? "text-ui-fg-subtle txt-small"}
+            >
+              {Icon && <Icon className={props.iconClassName ?? "inline-block mr-2"} />}
+              {item.href ? (
+                <LocalizedClientLink
+                  className="hover:text-ui-fg-base"
+                  href={item.href}
+                  data-testid="category-link"
+                >
+                  {item.text}
+                </LocalizedClientLink>
+              ) : (
+                <span className="hover:text-ui-fg-base">{item.text}</span>
+              )}
+            </li>
+          )
+        })}
+      </ul>
+    </div>
+  )
+}