Implement photo grid layout and add react-plock for masonry effect

app/photography/components/Grid.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { Masonry } from "react-plock";
+import type { Photo } from "@/lib/getPhotography";
+
+export const Grid = ({ photos }: { photos: Photo[] }) => {
+ return (
+  <Masonry
+   items={photos}
+   config={{
+    columns: [1, 2],
+    gap: [24, 24],
+    media: [640, 1024],
+   }}
+   render={(result) => (
+    <Link key={`photo-${result.path}`} href={result.path} target="_blank">
+     <Image className="cursor-zoom-in rounded-lg bg-neutral-200 blur-0 duration-200 hover:opacity-70 dark:bg-neutral-200/15" src={result.path} alt={"Photo by Igor Kowalczyk"} width={720} height={480} sizes="(max-width: 640px) 100vw, (max-width: 1280px) 50vw, (max-width: 1536px) 33vw, 25vw" />
+    </Link>
+   )}
+  />
+ );
+};

app/photography/page.tsx

@@ -1,5 +1,4 @@
-import Image from "next/image";
-import Link from "next/link";
+import { Grid } from "./components/Grid";
 import { Description, Header1 } from "@/components/Headers";
 import { getPhotography } from "@/lib/getPhotography";
 
@@ -16,17 +15,7 @@ export default async function Page() {
    <Header1>My photography</Header1>
    <Description> I have a passion for photography, travel, and capturing life's most beautiful moments. Here, you can explore some of my finest photos.</Description>
 
-   <div className="mt-12 w-full columns-2 gap-6 md:columns-2xs">
-    {!photos ? (
-     <p className="mb-4 text-red-400">No images found!</p>
-    ) : (
-     photos.map((result) => (
-      <Link key={`photo-${result.path}`} href={result.path} target="_blank">
-       <Image className="mb-5 cursor-zoom-in rounded-lg bg-neutral-200 blur-0 duration-200 hover:opacity-70 dark:bg-neutral-200/15" src={result.path} alt={"Photo by Igor Kowalczyk"} width={720} height={480} sizes="(max-width: 640px) 100vw, (max-width: 1280px) 50vw, (max-width: 1536px) 33vw, 25vw" />
-      </Link>
-     ))
-    )}
-   </div>
+   <div className="mt-12 w-full">{!photos ? <p className="mb-4 text-red-400">No images found!</p> : <Grid photos={photos} />}</div>
   </div>
  );
 }

lib/getPhotography.tsx

@@ -1,7 +1,7 @@
 import "server-only";
 import { globby } from "globby";
 
-type Photo = { id: number; path: string };
+export type Photo = { id: number; path: string };
 
 const cache: Map<string, Photo | Photo[]> = new Map();
 

package.json

@@ -39,6 +39,7 @@
     "nprogress": "0.2.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
+    "react-plock": "3.4.0",
     "reading-time": "1.5.0",
     "rehype-autolink-headings": "7.1.0",
     "rehype-pretty-code": "0.14.0",