32 lines
893 B
TypeScript
32 lines
893 B
TypeScript
import Image from "next/image";
|
|
import FilteredLightbox from "@/components/lightbox";
|
|
import { trpc } from "@/trpc/server";
|
|
import { TRPCProvider } from "@/trpc/client";
|
|
|
|
export default async function Photos(): Promise<React.JSX.Element> {
|
|
const { data: images } = await trpc.photos.list();
|
|
|
|
return (
|
|
<div className="mx-auto">
|
|
<TRPCProvider>
|
|
<FilteredLightbox imageData={images}>
|
|
{images.map((image) => (
|
|
<Image
|
|
key={image.src}
|
|
alt={image.src}
|
|
src={image.src}
|
|
className="object-contain h-60 w-80"
|
|
sizes="100vw"
|
|
loading="lazy"
|
|
width={image.width}
|
|
height={image.height}
|
|
blurDataURL={image.blur}
|
|
placeholder="blur"
|
|
/>
|
|
))}
|
|
</FilteredLightbox>
|
|
</TRPCProvider>
|
|
</div>
|
|
);
|
|
}
|