From 60700ee11e97ecc8d154a416809d9f7c8475edcb Mon Sep 17 00:00:00 2001
From: Nam Doan <namds2920@gmail.com>
Date: Wed, 26 Nov 2025 11:22:08 +0700
Subject: [PATCH] refactor: add interface each component to define props config
 in JSON file

---
 .../layout/components/vt-linkbutton/index.tsx |  7 ++-
 .../layout/templates/vt-banner/banner-cta.tsx |  9 +++-
 .../layout/templates/vt-banner/banner-nav.tsx |  9 +++-
 .../templates/vt-banner/banner-ticker.tsx     | 14 ++++--
 .../layout/templates/vt-banner/index.tsx      | 50 ++++++++++++-------
 .../layout/templates/vt-image/index.tsx       | 27 ++++++++++
 src/modules/layout/templates/vt-nav/index.tsx | 10 +++-
 7 files changed, 100 insertions(+), 26 deletions(-)
 create mode 100644 src/modules/layout/templates/vt-image/index.tsx

diff --git a/src/modules/layout/components/vt-linkbutton/index.tsx b/src/modules/layout/components/vt-linkbutton/index.tsx
index 7e7af79..92ff296 100644
--- a/src/modules/layout/components/vt-linkbutton/index.tsx
+++ b/src/modules/layout/components/vt-linkbutton/index.tsx
@@ -2,8 +2,13 @@ import LocalizedClientLink from "@modules/common/components/localized-client-lin
 import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map";
 import { clx } from "@medusajs/ui"
  
+interface VtLinkProps {
+  className?: string
+  href?: string
+  label?: string
+}
 export const VtLink = ({ nodes, context }: { nodes: LayoutComponentDefinition; context: LayoutContext }) => {
-  const props = nodes.config ?? {}
+  const props = nodes.config as VtLinkProps ?? {}
   const className = clx("txt-compact-xlarge-plus hover:text-ui-fg-base", props.className)
   const href = props.href ?? "/"
   const label = props.label ?? "Medusa Store"
diff --git a/src/modules/layout/templates/vt-banner/banner-cta.tsx b/src/modules/layout/templates/vt-banner/banner-cta.tsx
index 885f0a4..f0fb507 100644
--- a/src/modules/layout/templates/vt-banner/banner-cta.tsx
+++ b/src/modules/layout/templates/vt-banner/banner-cta.tsx
@@ -12,8 +12,15 @@ interface BannerCTAProps {
   context: LayoutContext
 }
 
+interface BannerConfigProps {
+  text?: string
+  href?: string
+  iconLeft?: string
+  iconRight?: string
+  className?: string
+}
 export default function BannerCTA({ node, context }: BannerCTAProps) {
-  const props = node.config ?? {}
+  const props = node.config as BannerConfigProps ?? {}
   const text = props.text ?? ""
   const href = props.href ?? undefined
   const iconLeft = props.iconLeft
diff --git a/src/modules/layout/templates/vt-banner/banner-nav.tsx b/src/modules/layout/templates/vt-banner/banner-nav.tsx
index 488b9c7..361e8be 100644
--- a/src/modules/layout/templates/vt-banner/banner-nav.tsx
+++ b/src/modules/layout/templates/vt-banner/banner-nav.tsx
@@ -1,8 +1,13 @@
 import { DynamicLayoutRenderer } from "vibentec/renderer"
 import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map";
 
-export default function BannerNav({ node: node, context }: { node: LayoutComponentDefinition; context: LayoutContext }) {
-  const props = node.config ?? {};
+interface BannerNavProps {
+  left?: LayoutComponentDefinition[]
+  center?: LayoutComponentDefinition[]
+  right?: LayoutComponentDefinition[]
+}
+export default function BannerNav({ node, context }: { node: LayoutComponentDefinition; context: LayoutContext }) {
+  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">
diff --git a/src/modules/layout/templates/vt-banner/banner-ticker.tsx b/src/modules/layout/templates/vt-banner/banner-ticker.tsx
index f0b3b4a..62dc5ad 100644
--- a/src/modules/layout/templates/vt-banner/banner-ticker.tsx
+++ b/src/modules/layout/templates/vt-banner/banner-ticker.tsx
@@ -2,13 +2,21 @@ import styles from "./banner-ticker.module.css"
 import { DynamicLayoutRenderer } from "vibentec/renderer"
 import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map"
 
-export default function BannerTicker({ node, context }: { node: LayoutComponentDefinition; context: LayoutContext }) {
-  const props = node.config ?? {}
+interface BannerTickerProps {
+  node: LayoutComponentDefinition
+  context: LayoutContext
+}
+interface BannerConfigProps {
+  items?: LayoutComponentDefinition[]
+  speed?: number
+}
+export default function BannerTicker({ node, context }: BannerTickerProps) {
+  const props = node.config as BannerConfigProps ?? {}
   const speed = props.speed ?? 10;
   return (
     <div className="relative overflow-hidden w-full h-full">
       <div className={styles.ticker}   style={{ animationDuration: `${speed}s` }} >
-        <DynamicLayoutRenderer nodes={props.items} context={context} />
+        <DynamicLayoutRenderer nodes={props.items ?? []} context={context} />
       </div>
     </div>
   )
diff --git a/src/modules/layout/templates/vt-banner/index.tsx b/src/modules/layout/templates/vt-banner/index.tsx
index 6fb663d..0eb1df7 100644
--- a/src/modules/layout/templates/vt-banner/index.tsx
+++ b/src/modules/layout/templates/vt-banner/index.tsx
@@ -1,26 +1,42 @@
-import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map";
-import { clx } from "@medusajs/ui";
-import BannerNav from "./banner-nav";
-import BannerCTA from "./banner-cta";
-import BannerTicker from "./banner-ticker";
+import {
+  LayoutComponentDefinition,
+  LayoutContext,
+} from "vibentec/component-map"
+import { clx } from "@medusajs/ui"
+import BannerNav from "./banner-nav"
+import BannerCTA from "./banner-cta"
+import BannerTicker from "./banner-ticker"
 
-export default async function Banner({ nodes, context }: { nodes: LayoutComponentDefinition; context: LayoutContext }) {
-  const props = nodes.config ?? {};
-  const bannerClassName = clx("relative h-8 mx-auto border-b duration-200 bg-white border-ui-border-base", props.className);
-  const bannerVariant = props.variant as "nav" | "cta" | "ticker";
-  if (!bannerVariant) return null;
+interface BannerProps {
+  variant: "nav" | "cta" | "ticker"
+  className?: string
+  speed?: number
+}
+export default async function Banner({
+  nodes,
+  context,
+}: {
+  nodes: LayoutComponentDefinition
+  context: LayoutContext
+}) {
+  const props = (nodes.config as BannerProps) ?? {}
+  const bannerClassName = clx(
+    "relative h-8 mx-auto border-b duration-200 bg-white border-ui-border-base",
+    props.className
+  )
+  if (!props.variant) return null
 
   const variants = {
-    "nav": BannerNav,
-    "cta": BannerCTA,
-    "ticker": BannerTicker,
-  };
+    nav: BannerNav,
+    cta: BannerCTA,
+    ticker: BannerTicker,
+  }
 
-  const Component = variants[bannerVariant];
+  const Component = variants[props.variant]
 
   return (
     <div className={bannerClassName}>
-      <Component node={nodes} context={context}/>
+      <Component node={nodes} context={context} />
     </div>
-  );
+  )
 }
diff --git a/src/modules/layout/templates/vt-image/index.tsx b/src/modules/layout/templates/vt-image/index.tsx
new file mode 100644
index 0000000..7d84d72
--- /dev/null
+++ b/src/modules/layout/templates/vt-image/index.tsx
@@ -0,0 +1,27 @@
+import { clx } from "@medusajs/ui"
+import {
+  LayoutComponentDefinition,
+  LayoutContext,
+} from "@vibentec/component-map"
+import Image from "next/image"
+
+export interface VtImageConfig {
+  src: string
+  alt: string
+  className?: string,
+  objectFit?: string,
+}
+export default function VtImage({
+  nodes,
+  context,
+}: {
+  nodes: LayoutComponentDefinition
+  context: LayoutContext
+}) {
+  const props = (nodes.config as VtImageConfig) ?? {}
+  return (
+    <div className={clx("relative", props.className)}>
+      <Image src={props.src} alt={props.alt} fill objectFit={props.objectFit ?? "contain"} />
+    </div>
+  )
+}
diff --git a/src/modules/layout/templates/vt-nav/index.tsx b/src/modules/layout/templates/vt-nav/index.tsx
index 2518e51..ea8267c 100644
--- a/src/modules/layout/templates/vt-nav/index.tsx
+++ b/src/modules/layout/templates/vt-nav/index.tsx
@@ -1,11 +1,17 @@
 import { DynamicLayoutRenderer } from "vibentec/renderer"
 import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map";
 
+interface BannerNavProps {
+  className?: string;
+  left?: LayoutComponentDefinition[];
+  center?: LayoutComponentDefinition[];
+  right?: LayoutComponentDefinition[];
+}
 export default function VtNav({ nodes, context }: { nodes: LayoutComponentDefinition; context: LayoutContext }) {
-  const props = nodes.config ?? {}
+  const props = nodes.config as BannerNavProps ?? {}
 
   return (
-    <div className="relative h-16 mx-auto border-b duration-200 bg-white border-ui-border-base">
+    <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">
         <div className="flex items-center gap-x-4">
           {props.left && <DynamicLayoutRenderer nodes={props.left} context={context} />}