svrjs-nextjs-website/components/cards/testimonialCard.tsx

import Image from "next/image";
import React from "react";

interface TestimonialCard {
  avatar: string;
  name: string;
  role?: string;
  testimonial: string;
  rating: number;
}

const TestimonialCard = ({
  avatar,
  name,
  role,
  testimonial,
  rating
}: TestimonialCard) => {
  return (
    <li className="inline-block w-full">
      <div className="bg-primary/10 dark:bg-[#1c1c1c] mx-auto mb-5 flex w-full cursor-default flex-col gap-4 rounded-2xl px-[30px] py-6 shadow-md transition-all hover:scale-[103%]">
        <div className="flex flex-row items-center gap-3">
          <div>
            <Image
              src={`/testimonials/${avatar}.webp`}
              alt="avatar1"
              width={40}
              height={40}
              className="rounded-full"
            />
          </div>
          <div className="space-y-1">
            <div className="flex items-center gap-1">
              <div className="small-semibold dark:text-white">{name}</div>
            </div>
            <div className="text-sm text-muted-foreground">{role}</div>
          </div>
        </div>
        <p className="body-regular dark:text-white">{testimonial}</p>
        <div className="hue-rotate-90 text-lg">
          {/* <Image
						src="/testimonials/stars.svg"
						alt="star"
						width={120}
						height={120}
						className="object-cover"
					/> */}
          {"⭐".repeat(rating)}
        </div>
      </div>
    </li>
  );
};

export default TestimonialCard;