45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { Card } from "poyraz-ui/atoms";
|
|
import { SPONSORS } from "@/data/sponsors";
|
|
|
|
export function SponsorsSection() {
|
|
if (!SPONSORS || SPONSORS.length === 0) return null;
|
|
|
|
return (
|
|
<section className="pt-12 md:pt-14">
|
|
<div className="grid grid-cols-2 justify-start gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
|
|
{SPONSORS.map((sponsor) => {
|
|
const logoContent = (
|
|
<Card className="flex h-20 w-full items-center justify-center rounded-sm border-border bg-card p-4 transition-all hover:bg-accent hover:shadow-sm">
|
|
<div className="relative h-full w-full grayscale transition-all duration-300 hover:grayscale-0">
|
|
<Image
|
|
src={sponsor.logo}
|
|
alt={sponsor.name}
|
|
fill
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
</Card>
|
|
);
|
|
|
|
if (sponsor.websiteUrl) {
|
|
return (
|
|
<Link
|
|
key={sponsor.id}
|
|
href={sponsor.websiteUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
{logoContent}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
return <div key={sponsor.id}>{logoContent}</div>;
|
|
})}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|