58 lines
2.4 KiB
TypeScript
58 lines
2.4 KiB
TypeScript
import Link from "next/link";
|
|
import { MapPin } from "lucide-react";
|
|
import { Container } from "@/components/Container";
|
|
import { Placeholder } from "@/components/Placeholder";
|
|
import { SlotLink } from "@/components/SlotLink";
|
|
import { branches } from "@/lib/data";
|
|
import { parseAspectRatio } from "@/lib/static-images";
|
|
import type { SlotMediaItem } from "@/lib/static-images";
|
|
|
|
export function Branches({ images, aspectRatio }: { images?: SlotMediaItem[]; aspectRatio?: string }) {
|
|
const ratio = parseAspectRatio(aspectRatio);
|
|
|
|
return (
|
|
<section className="bg-paper py-20">
|
|
<Container>
|
|
<div className="mb-10 flex items-end justify-between gap-4">
|
|
<div>
|
|
<p className="section-kicker">Locations</p>
|
|
<h2 className="mt-3 text-3xl font-extrabold">دو شعبه در قم</h2>
|
|
</div>
|
|
<Link href="/contact" className="hidden text-[13px] font-bold text-brand sm:inline-flex">
|
|
مسیر و تلفنها
|
|
</Link>
|
|
</div>
|
|
<div className="grid gap-5 md:grid-cols-2">
|
|
{branches.map((branch, index) => {
|
|
const media = images?.[index];
|
|
const src = media?.image || branch.image;
|
|
const href = media?.href || "/contact";
|
|
return (
|
|
<SlotLink key={branch.id} href={href} className="group overflow-hidden rounded-2xl bg-white">
|
|
<div
|
|
className={`relative overflow-hidden ${ratio ? "" : "aspect-[16/8]"}`}
|
|
style={ratio ? { aspectRatio: ratio } : undefined}
|
|
>
|
|
<Placeholder
|
|
src={src}
|
|
fallbackSrc={media?.fallbackSrc ?? branch.image}
|
|
alt={media?.title || branch.title}
|
|
className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105"
|
|
/>
|
|
</div>
|
|
<div className="flex gap-3 p-6">
|
|
<MapPin className="mt-1 size-5 shrink-0 text-brand" />
|
|
<div>
|
|
<h3 className="text-[18px] font-bold">{media?.title || branch.title}</h3>
|
|
<p className="mt-2 text-[14px] leading-7 text-muted">{media?.text || branch.address}</p>
|
|
</div>
|
|
</div>
|
|
</SlotLink>
|
|
);
|
|
})}
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|