Homepage: Implement VtFeedback User with Carousel (DrSquatch) #28

New Issue

namds29 · 2025-12-23T03:07:36Z

namds29 commented

2025-12-23 03:07:36 +00:00

![image](/attachments/8f79f991-8046-4c50-9efc-adcbb0f34156)

image.png

211 KiB

namds29 added this to the Storefront Shop project 2025-12-23 03:07:36 +00:00

namds29 commented

2026-01-07 03:28:17 +00:00

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

{
  "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.

{
  "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

{
  "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.

![image](/attachments/83c6f713-7507-4b2a-acb0-23034b9e59e6) # 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.

image.png

108 KiB

namds29 changed title from ~~Homepage: Implement Feedback User with Carousel (DrSquatch)~~ to Homepage: Implement VtFeedback User with Carousel (DrSquatch)

2026-01-09 08:13:27 +00:00

Sign in to join this conversation.