37 lines
1.3 KiB
TypeScript
37 lines
1.3 KiB
TypeScript
interface Testimonial {
|
|
author: string;
|
|
title: string;
|
|
content: string;
|
|
imageUrl: string;
|
|
link: string;
|
|
}
|
|
|
|
export function TestimonialCard({ data }: { data: Testimonial }): JSX.Element {
|
|
return (
|
|
<figure className="relative flex flex-col-reverse rounded-lg border border-slate-200 bg-white/40 p-4 text-sm shadow-sm transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 hover:bg-white dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800">
|
|
<blockquote className="mt-4 text-slate-600 dark:text-slate-400">
|
|
<p>{data.content}</p>
|
|
</blockquote>
|
|
<figcaption className="flex items-center space-x-4">
|
|
<img
|
|
src={data.imageUrl}
|
|
alt={data.author}
|
|
className="h-12 w-12 flex-none rounded-full border border-slate-200 object-cover dark:border-slate-800/40"
|
|
loading="lazy"
|
|
/>
|
|
<div className="flex-auto">
|
|
<div className="font-semibold text-slate-500 dark:text-slate-300">
|
|
<a target="_blank" rel="noreferrer" href={data.link}>
|
|
<span className="absolute inset-0"></span>
|
|
{data.author}
|
|
</a>
|
|
</div>
|
|
<div className="mt-0.5 text-xs text-slate-400 dark:text-slate-500">
|
|
{data.title}
|
|
</div>
|
|
</div>
|
|
</figcaption>
|
|
</figure>
|
|
);
|
|
}
|