74 lines
2.9 KiB
TypeScript
74 lines
2.9 KiB
TypeScript
import { Container } from "@/components/Container";
|
|
import { Placeholder } from "@/components/Placeholder";
|
|
import { SlotLink } from "@/components/SlotLink";
|
|
import { glossyBar } from "@/lib/glossy";
|
|
import { parseAspectRatio } from "@/lib/static-images";
|
|
import type { SlotMediaItem } from "@/lib/static-images";
|
|
|
|
export function BannerRow({
|
|
banners,
|
|
columns,
|
|
aspectRatio,
|
|
}: {
|
|
banners: SlotMediaItem[];
|
|
columns: 2 | 3;
|
|
aspectRatio?: string;
|
|
}) {
|
|
const ratio = parseAspectRatio(aspectRatio);
|
|
|
|
return (
|
|
<section className="pb-4">
|
|
<Container>
|
|
<div className={`grid gap-5 ${columns === 3 ? "md:grid-cols-3" : "md:grid-cols-2"}`}>
|
|
{banners.map((banner) => (
|
|
<SlotLink key={banner.id} href={banner.href} className="group relative block">
|
|
<div
|
|
className={`relative overflow-hidden rounded-2xl ${
|
|
ratio ? "min-h-[180px]" : columns === 3 ? "aspect-[4/3]" : "aspect-[16/8] min-h-[220px]"
|
|
}`}
|
|
style={ratio ? { aspectRatio: ratio } : undefined}
|
|
>
|
|
<Placeholder
|
|
src={banner.image}
|
|
fallbackSrc={banner.fallbackSrc}
|
|
alt={banner.title ?? ""}
|
|
className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105"
|
|
/>
|
|
{(banner.title || banner.kicker || banner.text) && (
|
|
<div
|
|
className="absolute inset-x-3 bottom-3 z-10 overflow-hidden rounded-2xl px-4 py-3 sm:px-5"
|
|
style={glossyBar}
|
|
>
|
|
<div dir="rtl" className="flex min-h-[2.5rem] items-center gap-3">
|
|
{banner.title ? (
|
|
<h3 className="min-w-0 truncate text-[14px] font-bold text-white sm:text-[16px]">
|
|
{banner.title}
|
|
</h3>
|
|
) : null}
|
|
{banner.kicker ? (
|
|
<>
|
|
<span className="h-5 w-px shrink-0 bg-white/20" />
|
|
<p className="font-latin shrink-0 text-[10px] tracking-[0.22em] text-white/60 uppercase">
|
|
{banner.kicker}
|
|
</p>
|
|
</>
|
|
) : null}
|
|
</div>
|
|
{banner.text ? (
|
|
<div className="grid grid-rows-[0fr] transition-[grid-template-rows] duration-500 ease-out group-hover:grid-rows-[1fr]">
|
|
<div className="min-h-0 overflow-hidden">
|
|
<p className="pt-1 pb-1 text-right text-[13px] leading-7 text-white/75">{banner.text}</p>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</SlotLink>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|