1 Carousel Feedback Component Guideline

namds29 edited this page 2026-01-07 03:29:38 +00:00

Unescape Escape

Table of Contents

• VtFeedback — Usage & JSON Configuration
• Overview
• Where To Configure
• Minimal JSON Snippet
• Full Example
• Config Keys
• Behavior Notes
• Placement in Page JSON
• Switching the Active Design JSON

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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.