1a710aa3c6
Some checks are pending
Deploy to Cloudflare Workers (OpenNext) / deploy (push) Waiting to run
40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import type { Person } from "@/content/people";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type Props = {
|
|
speaker: Person;
|
|
className?: string;
|
|
};
|
|
|
|
export function SpeakerCard({ speaker, className }: Props) {
|
|
return (
|
|
<Link
|
|
href="/speakers"
|
|
className={cn(
|
|
"group block overflow-hidden rounded-2xl border border-border bg-white p-4 transition-all hover:border-[#1a5c38]/25 hover:shadow-md",
|
|
className
|
|
)}
|
|
>
|
|
<div className="relative mx-auto aspect-[4/5] w-full max-h-[220px] overflow-hidden rounded-xl bg-muted/30">
|
|
<Image
|
|
src={speaker.image}
|
|
alt={speaker.name}
|
|
fill
|
|
className="object-contain object-bottom transition-transform duration-300 group-hover:scale-[1.02]"
|
|
sizes="(max-width: 768px) 50vw, 25vw"
|
|
/>
|
|
</div>
|
|
<h3 className="mt-4 text-lg font-bold leading-tight group-hover:text-[#1a5c38]">
|
|
{speaker.name}
|
|
</h3>
|
|
<p className="mt-1 text-sm text-muted-foreground">{speaker.title}</p>
|
|
<p className="mt-0.5 text-sm font-medium text-[#1a5c38]/90">{speaker.company}</p>
|
|
{speaker.panel && (
|
|
<p className="mt-2 line-clamp-2 text-xs text-muted-foreground">{speaker.panel}</p>
|
|
)}
|
|
</Link>
|
|
);
|
|
}
|