feat; implement brand

2025-12-30 09:47:20 +07:00
parent c3e00ee204
commit c800f87ffe
6 changed files with 108 additions and 1 deletions
@@ -0,0 +1,72 @@
+import { clx } from "@medusajs/ui"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import {
+  LayoutComponentDefinition,
+  LayoutContext,
+} from "@vibentec/component-map"
+
+export default async function VtBrand({
+  nodes,
+  context,
+}: {
+  nodes: LayoutComponentDefinition
+  context: LayoutContext
+}) {
+  const props = nodes.config ?? {}
+
+  const title: string = props.title ?? "Trusted By"
+  const items = props.items ?? []
+
+  const classes = {
+    container: props.className ?? "w-full py-12 bg-[#CFECD9]",
+    inner: props.innerClassName ?? "content-container flex flex-col items-center",
+    title: props.titleClassName ?? "text-[#1f3521] text-[20px] font-bold mb-8",
+    brands: props.brandsClassName ?? "flex w-full items-center justify-between gap-12",
+    item: props.itemClassName ?? "opacity-90",
+    image: props.imageClassName ?? "h-[48px] w-auto object-contain",
+    label: props.labelClassName ?? "text-[#1f3521] text-[36px] font-semibold",
+  }
+
+  if (!items || items.length === 0) {
+    return null
+  }
+
+  const renderItem = (brand: any, idx: number) => {
+    const content = brand.imageSrc ? (
+      <img
+        src={brand.imageSrc}
+        alt={brand.alt ?? brand.label ?? `brand-${idx}`}
+        className={clx(classes.image, brand.imageClassName)}
+      />
+    ) : (
+      <span className={clx(classes.label, brand.className)}>
+        {brand.label ?? ""}
+      </span>
+    )
+
+    return brand.href ? (
+      <LocalizedClientLink
+        key={`brand-${idx}`}
+        href={brand.href}
+        className={clx(classes.item, brand.containerClassName)}
+      >
+        {content}
+      </LocalizedClientLink>
+    ) : (
+      <div className={clx(classes.item, brand.containerClassName)} key={`brand-${idx}`}>
+        {content}
+      </div>
+    )
+  }
+
+  return (
+    <section className={classes.container}>
+      <div className={classes.inner}>
+        {title && <div className={classes.title}>{title}</div>}
+        <div className={classes.brands}>
+          {items.map((brand: any, idx: number) => renderItem(brand, idx))}
+        </div>
+      </div>
+    </section>
+  )
+}