feat: add avatar to Testimonials component

components/content/Testimonials.tsx

@@ -1,8 +1,17 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import Image from "next/image";
 import { IconPlayerPauseFilled, IconPlayerPlayFilled, IconPoint, IconPointFilled } from '@tabler/icons-react';
 
+function getInitials(name: string) {
+  return name
+    .split(/\s+/)
+    .map((part) => part[0]?.toUpperCase() ?? "")
+    .slice(0, 2)
+    .join("");
+}
+
 type Testimonial = {
   name: string;
   title: string;
@@ -31,18 +40,35 @@ export default function Testimonials({ items }: TestimonialsProps) {
     return () => clearInterval(id);
   }, [items.length, isPlaying]);
 
+  // TODO: fix bug - when clicking a pagination button, the auto-rotation timer doesn't reset, causing it to immediately rotate to the next testimonial after 5 seconds instead of 10
+
   return (
     <section className="w-full">
       {/* header: avatar + name + title */}
-      <header className="flex items-center gap-3">
+      <header className="flex items-center gap-3 mb-2">
-        {/* TODO: avatar */}
+        {active.avatar ? (
+          <Image
+            src={active.avatar}
+            alt={active.name}
+            width={64}
+            height={64}
+            className="rounded-full object-cover size-10"
+          />
+        ) : (
+          <div
+            aria-hidden
+            className="size-10 rounded-full bg-neutral-800 flex items-center justify-center text-xs font-medium text-neutral-400"
+          >
+            {getInitials(active.name)}
+          </div>
+        )}
         <div>
-          <div>{active.name}</div>
+          <div className="text-sm font-semibold">{active.name}</div>
-          <div>{active.title}</div>
+          <div className="text-xs text-neutral-500">{active.title}</div>
         </div>
       </header>
 
-      <blockquote>{active.quote}</blockquote>
+      <blockquote className="p-3">{active.quote}</blockquote>
 
       <footer className="flex items-center justify-between">
         <div className="flex mt-3">
@@ -59,7 +85,7 @@ export default function Testimonials({ items }: TestimonialsProps) {
 
         {/* TODO: play/pause button + auto-rotate timer */}
         <button onClick={() => setIsPlaying(!isPlaying)} aria-label={isPlaying ? "Pause" : "Play"}>
-          {isPlaying ? <IconPlayerPauseFilled /> : <IconPlayerPlayFilled />}
+          {isPlaying ? <IconPlayerPauseFilled size={20} /> : <IconPlayerPlayFilled size={20} />}
         </button>
       </footer>
     </section>