svrjs-nextjs-website/components/cards/testimonialCard.tsx
Cypro Freelance e7f1a86172 some changes
2024-07-23 23:32:57 +05:30

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;