From 2475bbdd4f84aaeedb5aa1f9d323c1cccfaee30e Mon Sep 17 00:00:00 2001
From: namds29 <dsnam1@cmcglobal.vn>
Date: Wed, 7 Jan 2026 03:29:38 +0000
Subject: [PATCH] Add Carousel Feedback Component Guideline

---
 Carousel-Feedback-Component-Guideline.md | 92 ++++++++++++++++++++++++
 1 file changed, 92 insertions(+)
 create mode 100644 Carousel-Feedback-Component-Guideline.md

diff --git a/Carousel-Feedback-Component-Guideline.md b/Carousel-Feedback-Component-Guideline.md
new file mode 100644
index 0000000..65278e6
--- /dev/null
+++ b/Carousel-Feedback-Component-Guideline.md
@@ -0,0 +1,92 @@
+# VtFeedback — Usage & JSON Configuration
+
+## Overview
+- `VtFeedback` renders a horizontally scrolling carousel of review items with optional autoplay and next/prev controls.
+- Driven by design JSON; no code changes required to style or populate content.
+- Component location: `src/modules/home/components/vt-feedback/index.tsx`.
+- Mapping and rendering are handled by `src/vibentec/component-map.tsx` and `src/vibentec/renderer.tsx`.
+
+## Where To Configure
+- The active design JSON is loaded by `src/vibentec/configloader.ts` using `jsonFileNames.namDrsquatch`.
+- Edit `config/nam.drsquatch.design.json` (or switch to another file via `src/vibentec/devJsonFileNames.ts`).
+- Typical placement is under `pages.Home`.
+
+## Minimal JSON Snippet
+```json
+{
+  "VtFeedback": {
+    "config": {
+      "title": "Customer Reviews",
+      "items": [
+        { "rating": 5, "title": "Great!", "text": "Loved it.", "author": "Alice" },
+        { "rating": 4, "title": "Solid", "text": "Works well.", "author": "Bob" }
+      ]
+    }
+  }
+}
+```
+
+## Full Example
+- Reference implementation in `config/nam.drsquatch.design.json`.
+```json
+{
+  "VtFeedback": {
+    "config": {
+      "title": "100,000+ Reviews From Squatchers",
+      "className": "content-container py-16",
+      "titleClassName": "text-[#1f3521] text-[28px] font-bold text-center mb-10",
+      "duration": 5,
+      "options": { "loop": true },
+      "itemClassName": "min-w-full px-6",
+      "starsClassName": "text-[#C4622C] text-xl leading-none",
+      "reviewTitleClassName": "text-[#1f3521] font-bold",
+      "reviewTextClassName": "text-[#1f3521]",
+      "authorClassName": "italic text-[#1f3521]",
+      "controls": "mt-6 flex items-center justify-center gap-4",
+      "items": [
+        { "rating": 5, "title": "Ah-freaking-amazing!", "text": "…", "author": "Stephen B." },
+        { "rating": 5, "title": "Best damn soap ever…period.", "text": "…", "author": "Chris H." },
+        { "rating": 5, "title": "Hilarious…products awesome too", "text": "…", "author": "Mike C." }
+      ]
+    }
+  }
+}
+```
+
+## Config Keys
+- Content
+  - `title`: Optional heading text shown above the carousel.
+  - `items`: Array of review objects with fields `rating` (0–5), `title`, `text`, `author`.
+- Autoplay & carousel
+  - `duration`: Seconds between slides; `<= 0` disables autoplay.
+  - `options`: Passed to Embla (`useEmblaCarousel`) for behavior such as `loop`.
+- Styling classNames
+  - `className`: Section container.
+  - `titleClassName`: Heading.
+  - `itemClassName`: Slide container.
+  - `starsClassName`: Stars row.
+  - `reviewTitleClassName`, `reviewTextClassName`, `authorClassName`: Review content.
+- `controls`: Any truthy string enables next/prev controls when `items.length > 1`.
+
+## Behavior Notes
+- Stars rendering
+  - Stars are derived from `rating` via `renderStars`. Values are clamped between 0 and 5.
+- Controls visibility
+  - Controls show only if there is more than one item and `controls` is truthy.
+- Autoplay
+  - Enabled when `duration > 0`; uses Embla autoplay plugin with delay `duration * 1000`.
+
+## Placement in Page JSON
+```json
+{
+  "pages": {
+    "Home": [
+      { "Hero": { "config": { /* ... */ } } },
+      { "VtFeedback": { "config": { /* as above */ } } }
+    ]
+  }
+}
+```
+
+## Switching the Active Design JSON
+- Change `fileName` in `src/vibentec/configloader.ts` to another entry from `src/vibentec/devJsonFileNames.ts` (e.g., `jsonFileNames.nam3Bear`) and restart the dev server.