feat: implement vt feedback component

2026-01-05 09:49:35 +07:00
parent c800f87ffe
commit 1716ef2cf4
3 changed files with 130 additions and 0 deletions
@@ -0,0 +1,91 @@
+"use client"
+import useEmblaCarousel from "embla-carousel-react"
+import Autoplay from "embla-carousel-autoplay"
+import { useMemo } from "react"
+import { clx } from "@medusajs/ui"
+import {
+  LayoutComponentDefinition,
+  LayoutContext,
+} from "@vibentec/component-map"
+import { NextButton, PrevButton, usePrevNextButtons } from "@modules/layout/templates/vt-carousel/carousel-arrow-button"
+
+export default function VtFeedback({
+  nodes,
+  context,
+}: {
+  nodes: LayoutComponentDefinition
+  context: LayoutContext
+}) {
+  
+  const props = nodes.config ?? {}
+
+  const title: string = props.title ?? ""
+  const items = props.items ?? []
+  const durationSeconds: number = props.duration ?? 5
+  const options = props.options ?? { loop: true }
+ const plugins = useMemo(() => {
+    if (!durationSeconds || durationSeconds <= 0) return []
+    return [
+      Autoplay({
+        delay: durationSeconds * 1000,
+        stopOnInteraction: false,
+        stopOnMouseEnter: true,
+      }),
+    ]
+  }, [durationSeconds])
+  const [emblaRef, emblaApi] = useEmblaCarousel(options, plugins)
+  const { prevBtnDisabled, nextBtnDisabled, onPrevButtonClick, onNextButtonClick } = usePrevNextButtons(emblaApi)
+
+  const classes = {
+    container: props.className ?? "content-container py-16",
+    title: props.titleClassName ?? "text-[#1f3521] text-[28px] font-bold text-center mb-10",
+    viewport: "relative overflow-hidden",
+    containerInner: "flex",
+    slide: props.itemClassName ?? "min-w-full px-6",
+    slideInner: "flex flex-col items-center text-center gap-3",
+    stars: props.starsClassName ?? "text-[#C4622C] text-xl leading-none",
+    reviewTitle: props.reviewTitleClassName ?? "text-[#1f3521] font-bold",
+    reviewText: props.reviewTextClassName ?? "text-[#1f3521]",
+    author: props.authorClassName ?? "italic text-[#1f3521]",
+    controls: props.controls,
+  }
+
+  if (!items || items.length === 0) return null
+
+  const showControls = items.length > 1 && classes.controls
+
+  const renderStars = (rating?: number) => {
+    const count = Math.max(0, Math.min(5, Math.round(rating ?? 5)))
+    return "★★★★★".slice(0, count)
+  }
+
+  return (
+    <section className={classes.container}>
+      {title && <h2 className={classes.title}>{title}</h2>}
+      <div className={classes.viewport} ref={emblaRef}>
+        <div className={classes.containerInner}>
+          {items.map((it: any, idx: number) => (
+            <div className={classes.slide} key={`feedback-${idx}`}>
+              <div className={classes.slideInner}>
+                <div className={classes.stars}>{renderStars(it.rating)}</div>
+                {it.title && <div className={classes.reviewTitle}>{it.title}</div>}
+                {it.text && <div className={classes.reviewText}>{it.text}</div>}
+                {it.author && <div className={classes.author}>{it.author}</div>}
+              </div>
+            </div>
+          ))}
+        </div>
+        {showControls && (
+          <div className="absolute top-1/2 -translate-y-1/2 left-0 right-0 flex items-center justify-between px-4">
+            <div className="pointer-events-auto">
+              <PrevButton onClick={onPrevButtonClick} disabled={prevBtnDisabled} />
+            </div>
+            <div className="pointer-events-auto">
+              <NextButton onClick={onNextButtonClick} disabled={nextBtnDisabled} />
+            </div>
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}