93 lines
3.1 KiB
TypeScript
93 lines
3.1 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
import { Typography } from "@/components/Typography";
|
|
|
|
export type ImageGalleryProps = {
|
|
tagline: string;
|
|
heading: string;
|
|
subheading: string;
|
|
layout: "grid" | "masonry" | "editorial";
|
|
items: Array<{ src: string; alt: string; caption?: string }>;
|
|
};
|
|
|
|
export function ImageGallery({ tagline, heading, subheading, layout, items }: ImageGalleryProps) {
|
|
return (
|
|
<section className="bg-background py-20 md:py-28">
|
|
<div className="container mx-auto max-w-7xl px-6">
|
|
{(tagline || heading || subheading) && (
|
|
<div className="mx-auto mb-12 max-w-2xl text-center">
|
|
{tagline ? (
|
|
<p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
|
|
{tagline}
|
|
</p>
|
|
) : null}
|
|
{heading ? <Typography variant="h2">{heading}</Typography> : null}
|
|
{subheading ? (
|
|
<Typography variant="subtitle1" className="mt-3">
|
|
{subheading}
|
|
</Typography>
|
|
) : null}
|
|
</div>
|
|
)}
|
|
|
|
{layout === "masonry" ? (
|
|
<div className="columns-1 gap-4 sm:columns-2 lg:columns-3">
|
|
{items.map((it, i) => (
|
|
<figure key={i} className="mb-4 break-inside-avoid">
|
|
<img
|
|
src={it.src}
|
|
alt={it.alt}
|
|
className="w-full rounded-md object-cover"
|
|
/>
|
|
{it.caption ? (
|
|
<figcaption className="mt-2 text-xs text-muted-foreground">
|
|
{it.caption}
|
|
</figcaption>
|
|
) : null}
|
|
</figure>
|
|
))}
|
|
</div>
|
|
) : layout === "editorial" ? (
|
|
<div className="grid grid-cols-1 gap-6 md:grid-cols-12">
|
|
{items.slice(0, 5).map((it, i) => (
|
|
<figure
|
|
key={i}
|
|
className={cn(
|
|
"overflow-hidden rounded-md bg-muted",
|
|
i === 0 && "md:col-span-7 md:row-span-2",
|
|
i === 1 && "md:col-span-5",
|
|
i === 2 && "md:col-span-5",
|
|
i === 3 && "md:col-span-6",
|
|
i === 4 && "md:col-span-6",
|
|
)}
|
|
>
|
|
<img
|
|
src={it.src}
|
|
alt={it.alt}
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
</figure>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
|
{items.map((it, i) => (
|
|
<figure key={i}>
|
|
<img
|
|
src={it.src}
|
|
alt={it.alt}
|
|
className="aspect-[4/5] w-full rounded-md object-cover"
|
|
/>
|
|
{it.caption ? (
|
|
<figcaption className="mt-2 text-xs text-muted-foreground">
|
|
{it.caption}
|
|
</figcaption>
|
|
) : null}
|
|
</figure>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|