refactor: add interface each component to define props config in JSON file

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