55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
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;
|