From b0b8d5e55f4b483042f7158adc634188b70e14e7 Mon Sep 17 00:00:00 2001
From: MichalC <103170279+wSBMichalee@users.noreply.github.com>
Date: Thu, 3 Sep 2026 22:57:37 +0200
Subject: [PATCH] feat(ui): add autoplay to testimonials and display author
 initials avatar

---
 src/blocks/Testimonials/Component.tsx | 62 +++++++++++++++++++--------
 1 file changed, 43 insertions(+), 19 deletions(-)

diff --git a/src/blocks/Testimonials/Component.tsx b/src/blocks/Testimonials/Component.tsx
index ce051fe..41236f4 100644
--- a/src/blocks/Testimonials/Component.tsx
+++ b/src/blocks/Testimonials/Component.tsx
@@ -1,11 +1,27 @@
 'use client'
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import type { Page } from '../../payload-types'
 
 type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'testimonials' }>
 
 export const TestimonialsBlock: React.FC<Props> = ({ title, testimonials }) => {
   const [currentIndex, setCurrentIndex] = useState(0)
+  const [lastActionTime, setLastActionTime] = useState(Date.now())
+
+  useEffect(() => {
+    if (!testimonials || testimonials.length <= 1) return
+
+    const interval = setInterval(() => {
+      setCurrentIndex((prev) => (prev + 1) % testimonials.length)
+    }, 7500)
+
+    return () => clearInterval(interval)
+  }, [testimonials, lastActionTime])
+
+  const handleDotClick = (index: number) => {
+    setCurrentIndex(index)
+    setLastActionTime(Date.now())
+  }
 
   if (!testimonials || testimonials.length === 0) return null
 
@@ -21,25 +37,33 @@ export const TestimonialsBlock: React.FC<Props> = ({ title, testimonials }) => {
         </div>
         
         <div className="relative min-h-[300px] sm:min-h-[240px]">
-          {testimonials.map((t: NonNullable<Props['testimonials']>[0], index: number) => (
-            <div
-              key={t.id || index}
-              className={`absolute inset-0 flex flex-col items-start justify-start transition-opacity duration-1000 ease-in-out ${
-                index === currentIndex ? 'opacity-100 z-10' : 'opacity-0 z-0 pointer-events-none'
-              }`}
-            >
-              <p className="relative z-10 font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground leading-[1.2] mb-10 text-balance tracking-tight max-w-4xl">
-                {t.quote}
-              </p>
-              
-              <div className="flex items-center gap-4">
-                <div className="w-12 h-px bg-accent/60" />
-                <p className="font-heading font-bold text-lg sm:text-xl text-foreground/80 uppercase tracking-wide">
-                  {t.author}
+          {testimonials.map((t: NonNullable<Props['testimonials']>[0], index: number) => {
+            const initial = t.author ? t.author.charAt(0).toUpperCase() : ''
+            return (
+              <div
+                key={t.id || index}
+                className={`absolute inset-0 flex flex-col items-start justify-start transition-opacity duration-1000 ease-in-out ${
+                  index === currentIndex ? 'opacity-100 z-10' : 'opacity-0 z-0 pointer-events-none'
+                }`}
+              >
+                <p className="relative z-10 font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground leading-[1.2] mb-10 text-balance tracking-tight max-w-4xl">
+                  {t.quote}
                 </p>
+                
+                <div className="flex items-center gap-6">
+                  <div className="hidden sm:block w-12 h-px bg-accent/60" />
+                  <div className="flex items-center gap-4">
+                    <div className="w-12 h-12 rounded-full bg-accent text-background font-heading flex items-center justify-center text-xl sm:text-2xl font-bold shrink-0">
+                      {initial}
+                    </div>
+                    <p className="font-heading font-bold text-lg sm:text-xl text-foreground/80 uppercase tracking-wide">
+                      {t.author}
+                    </p>
+                  </div>
+                </div>
               </div>
-            </div>
-          ))}
+            )
+          })}
         </div>
 
         {testimonials.length > 1 && (
@@ -47,7 +71,7 @@ export const TestimonialsBlock: React.FC<Props> = ({ title, testimonials }) => {
             {testimonials.map((_, index) => (
               <button
                 key={index}
-                onClick={() => setCurrentIndex(index)}
+                onClick={() => handleDotClick(index)}
                 className={`w-2 h-2 transition-all ${
                   index === currentIndex ? 'bg-accent w-8' : 'bg-border hover:bg-foreground/30'
                 }`}