Add custom images

app/event/page.tsx

@@ -30,7 +30,7 @@ export default function EventPage() {
           </p>
         </div>
         <div className="px-10 pb-8 md:px-24 md:pb-20">
-          <Masonry category={1} />
+          <Masonry category="event" />
         </div>
         <div className="bg-gray-500">
           <h3 className="pt-8 md:pt-20 mb-3 uppercase text-white tracking-wide text-xl lg:text-2xl">

app/maternity/page.tsx

@@ -30,7 +30,7 @@ export default function MaternityPage() {
           </p>
         </div>
         <div className="px-10 pb-8 md:px-24 md:pb-20">
-          <Masonry category={2} />
+          <Masonry category="maternity" />
         </div>
         <div className="bg-gray-500">
           <h3 className="pt-8 md:pt-20 mb-3 uppercase text-white tracking-wide text-xl lg:text-2xl">

app/newBorn/page.tsx

@@ -29,7 +29,7 @@ export default function NewBornPage() {
           </p>
         </div>
         <div className="px-10 pb-8 md:px-24 md:pb-20">
-          <Masonry category={3} />
+          <Masonry category="newborn" />
         </div>
         <div className="bg-gray-500">
           <h3 className="pt-8 md:pt-20 mb-3 uppercase text-white tracking-wide text-xl lg:text-2xl">

app/wedding/page.tsx

@@ -31,7 +31,7 @@ export default function WeddingPage() {
           </p>
         </div>
         <div className="px-10 pb-8 md:px-24 md:pb-20">
-          <Masonry category={4} />
+          <Masonry category="wedding" />
         </div>
         <div className="bg-gray-500">
           <h3 className="pt-8 md:pt-20 mb-3 uppercase text-white tracking-wide text-xl lg:text-2xl">

components/masonry/Masonry.tsx

@@ -1,18 +1,19 @@
 "use client";
 
-import PhotoAlbum from "react-photo-album";
+// import PhotoAlbum from "react-photo-album";
+import Gallery from "react-photo-album";
 
 import { useState } from "react";
 import NextJsImage from "./NextJsImage";
-import photos, { photos2, photos3, photos4 } from "./photos";
+import photos, { photos3, weddingPhotos, maternityPhotos } from "./photos";
 import Lightbox from "yet-another-react-lightbox";
 import "yet-another-react-lightbox/styles.css";
 
 import Thumbnails from "yet-another-react-lightbox/plugins/thumbnails";
 import "yet-another-react-lightbox/plugins/thumbnails.css";
 
 type MasonryProps = {
-  category: number;
+  category: string;
 };
 
 export default function Masonry({ category }: MasonryProps) {
@@ -29,24 +30,24 @@ export default function Masonry({ category }: MasonryProps) {
     setIndex(-1);
   };
 
-  const handleCategory = (cat: number) => {
+  const handleCategory = (cat: string) => {
     switch (cat) {
-      case 1:
+      case "event":
         return photos;
-      case 2:
-        return photos2;
-      case 3:
+      case "maternity":
+        return maternityPhotos;
+      case "newborn":
         return photos3;
-      case 4:
-        return photos4;
+      case "wedding":
+        return weddingPhotos;
       default:
         break;
     }
   };
 
   return (
     <>
-      <PhotoAlbum
+      {/* <PhotoAlbum
         photos={handleCategory(category) as any}
         layout="rows"
         renderPhoto={NextJsImage}
@@ -60,6 +61,20 @@ export default function Masonry({ category }: MasonryProps) {
             { viewport: "(max-width: 1199px)", size: "calc(100vw - 20px)" },
           ],
         }}
+      /> */}
+
+      <Gallery
+        layout="masonry"
+        columns={(containerWidth: number) => {
+          let columns = 1;
+          if (containerWidth >= 500) columns = 2;
+          if (containerWidth >= 900) columns = 3;
+          return columns;
+        }}
+        onClick={({ index: current }) => handleLightBox(current)}
+        photos={handleCategory(category) as any}
+        spacing={32}
+        renderPhoto={NextJsImage}
       />
 
       <Lightbox

components/masonry/photos.ts

@@ -1,3 +1,5 @@
+"use client"
+
 export type unsplashPhoto = {
   id: string;
   width: number;
@@ -35,14 +37,6 @@ const unsplashPhotos = [
   { id: "xKhtkhc9HbQ", width: 1080, height: 1440 },
 ];
 
-const unsplashPhotos2 = [
-  { id: "Jztmx9yqjBw", width: 1080, height: 607 },
-  { id: "-heLWtuAN3c", width: 1080, height: 608 },
-  { id: "xOigCUcFdA8", width: 1080, height: 720 },
-  { id: "1azAjl8FTnU", width: 1080, height: 1549 },
-  { id: "ALrCdq-ui_Q", width: 1080, height: 720 },
-];
-
 const unsplashPhotos3 = [
   { id: "twukN12EN7c", width: 1080, height: 694 },
   { id: "9UjEyzA6pP4", width: 1080, height: 1620 },
@@ -62,9 +56,84 @@ const unsplashPhotos4 = [
   { id: "xKhtkhc9HbQ", width: 1080, height: 1440 },
 ];
 
-const photos = unsplashingPhoto(unsplashPhotos)
-export const photos2 = unsplashingPhoto(unsplashPhotos2)
-export const photos3 = unsplashingPhoto(unsplashPhotos3)
-export const photos4 = unsplashingPhoto(unsplashPhotos4)
+export const weddingPhotos = [
+  {
+    src: "/images/photos/wedding/wedding_1.png",
+    alt: "Wedding 1",
+    caption: "Wedding 1",
+    width: 900, height: 900
+  },
+  {
+    src: "/images/photos/wedding/wedding_2.png",
+    alt: "Wedding 2",
+    caption: "Wedding 2",
+    width: 1080, height: 1620
+  },
+  {
+    src: "/images/photos/wedding/wedding_3.png",
+    alt: "Wedding 3",
+    caption: "Wedding 3",
+    width: 1024, height: 1024
+  },
+  {
+    src: "/images/photos/wedding/wedding_4.png",
+    alt: "Wedding 4",
+    caption: "Wedding 4",
+    width: 1080, height: 1080
+  },
+  {
+    src: "/images/photos/wedding/wedding_5.png",
+    alt: "Wedding 5",
+    caption: "Wedding 5",
+    width: 1080, height: 1080
+  },
+];
+
+export const maternityPhotos = [
+  {
+    src: "/images/photos/maternity/maternity_1.png",
+    alt: "Maternity 1",
+    caption: "Maternity 1",
+    width: 900, height: 900
+  },
+  {
+    src: "/images/photos/maternity/maternity_2.png",
+    alt: "Maternity 2",
+    caption: "Maternity 2",
+    width: 1080, height: 1620
+  },
+  {
+    src: "/images/photos/maternity/maternity_3.png",
+    alt: "Maternity 3",
+    caption: "Maternity 3",
+    width: 1024, height: 1024
+  },
+  {
+    src: "/images/photos/maternity/maternity_4.png",
+    alt: "Maternity 4",
+    caption: "Maternity 4",
+    width: 1080, height: 1080
+  },
+  {
+    src: "/images/photos/maternity/maternity_5.png",
+    alt: "Maternity 5",
+    caption: "Maternity 5",
+    width: 1080, height: 1080
+  },
+  {
+    src: "/images/photos/maternity/maternity_6.png",
+    alt: "Maternity 6",
+    caption: "Maternity 6",
+    width: 1080, height: 1620
+  },
+];
+
+export const lightboxImages = weddingPhotos.map(({ src, alt, caption }) => ({
+  src,
+  alt,
+  caption
+}));
 
+const photos = unsplashingPhoto(unsplashPhotos);
+export const photos3 = unsplashingPhoto(unsplashPhotos3);
 export default photos;

package.json

@@ -21,6 +21,7 @@
     "eslint": "8.26.0",
     "next": "^14.1.0",
     "next-i18next": "^13.0.3",
+    "nodemailer": "^6.9.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.50.1",
@@ -34,6 +35,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.7",
+    "@types/nodemailer": "^6.4.14",
     "autoprefixer": "^10.4.13",
     "eslint-config-next": "^14.1.0",
     "postcss": "^8.4.18",