From 9415e1c5a252d9e161e4d69f753317a0b0e8e94d Mon Sep 17 00:00:00 2001
From: Brad Traversy <traversymedia@gmail.com>
Date: Tue, 16 Jul 2024 11:56:52 -0400
Subject: [PATCH] Add images to theme property page

---
 _theme_files/property.html    | 33 +++++++++++++
 app/layout.jsx                |  1 +
 components/PropertyImages.jsx | 90 +++++++++++++++++++++++------------
 package-lock.json             | 42 +++++++++++++++-
 package.json                  |  2 +
 5 files changed, 136 insertions(+), 32 deletions(-)

diff --git a/_theme_files/property.html b/_theme_files/property.html
index 95f6f09..049149b 100644
--- a/_theme_files/property.html
+++ b/_theme_files/property.html
@@ -420,6 +420,7 @@
                 </li>
               </ul>
             </div>
+            <!-- Map -->
             <div class="bg-white p-6 rounded-lg shadow-md mt-6">
               <div id="map"></div>
             </div>
@@ -517,6 +518,38 @@
         </div>
       </div>
     </section>
+    
+    <!-- Images -->
+    <section class='bg-blue-50 p-4'>
+      <div class='container mx-auto'>
+          <div class='grid grid-cols-2 gap-4'>
+              <div class='col-span-2'>
+                <img
+                  src='./images/properties/a1.jpg'
+                  alt=''
+                  class='object-cover h-[400px] w-full rounded-xl cursor-pointer' />
+              </div>
+              <div class='col-span-2'>
+                <img
+                  src='./images/properties/a2.jpg'
+                  alt=''
+                  class='object-cover h-[400px] w-full rounded-xl cursor-pointer' />
+              </div>
+              <div class='col-span-2'>
+                <img
+                  src='./images/properties/a3.jpg'
+                  alt=''
+                  class='object-cover h-[400px] w-full rounded-xl cursor-pointer' />
+              </div>
+              <div class='col-span-2'>
+                <img
+                  src='./images/properties/a4.jpg'
+                  alt=''
+                  class='object-cover h-[400px] w-full rounded-xl cursor-pointer' />
+              </div>
+          </div>       
+      </div>
+    </section>
 
     <!-- Footer -->
     <footer class="bg-gray-200 py-4 mt-auto">
diff --git a/app/layout.jsx b/app/layout.jsx
index 3503270..d8aff11 100644
--- a/app/layout.jsx
+++ b/app/layout.jsx
@@ -4,6 +4,7 @@ import { GlobalProvider } from '@/context/GlobalContext';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import '@/assets/styles/globals.css';
+import 'photoswipe/dist/photoswipe.css';
 
 export const metadata = {
   title: 'PropertyPulse',
diff --git a/components/PropertyImages.jsx b/components/PropertyImages.jsx
index 3acf793..b410554 100644
--- a/components/PropertyImages.jsx
+++ b/components/PropertyImages.jsx
@@ -1,44 +1,72 @@
+'use client';
 import Image from 'next/image';
+import { Gallery, Item } from 'react-photoswipe-gallery';
 
 const PropertyImages = ({ images }) => {
   return (
-    <section className='bg-blue-50 p-4'>
-      <div className='container mx-auto'>
-        {images.length === 1 ? (
-          <Image
-            src={images[0]}
-            alt=''
-            className='object-cover h-[400px] mx-auto rounded-xl'
-            width={1800}
-            height={400}
-            priority={true}
-          />
-        ) : (
-          <div className={`grid grid-cols-2 gap-4`}>
-            {images.map((image, index) => (
-              <div
-                key={index}
-                className={`${
-                  images.length === 3 && index === 2
-                    ? 'col-span-2'
-                    : 'col-span-1'
-                }`}
-              >
+    <Gallery>
+      <section className='bg-blue-50 p-4'>
+        <div className='container mx-auto'>
+          {images.length === 1 ? (
+            <Item
+              original={images[0]}
+              thumbnail={images[0]}
+              width='1000'
+              height='600'
+            >
+              {({ ref, open }) => (
                 <Image
-                  src={image}
+                  ref={ref}
+                  onClick={open}
+                  src={images[0]}
                   alt=''
-                  className='object-cover h-[400px] w-full rounded-xl'
+                  className='object-cover h-[400px] mx-auto rounded-xl'
                   width={1800}
                   height={400}
                   priority={true}
                 />
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-    </section>
+              )}
+            </Item>
+          ) : (
+            <div className='grid grid-cols-2 gap-4'>
+              {images.map((image, index) => (
+                <div
+                  key={index}
+                  className={`
+                  ${
+                    images.length === 3 && index === 2
+                      ? 'col-span-2'
+                      : 'col-span-1'
+                  }
+                `}
+                >
+                  <Item
+                    original={image}
+                    thumbnail={image}
+                    width='1000'
+                    height='600'
+                  >
+                    {({ ref, open }) => (
+                      <Image
+                        ref={ref}
+                        onClick={open}
+                        src={image}
+                        alt=''
+                        className='object-cover h-[400px] w-full rounded-xl cursor-pointer'
+                        width={0}
+                        height={0}
+                        sizes='100vw'
+                        priority={true}
+                      />
+                    )}
+                  </Item>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </section>
+    </Gallery>
   );
 };
-
 export default PropertyImages;
diff --git a/package-lock.json b/package-lock.json
index d1dce54..8eba9fe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,11 +14,13 @@
         "mongoose": "^8.5.0",
         "next": "14.2.4",
         "next-auth": "^4.24.7",
+        "photoswipe": "^5.4.4",
         "react": "^18",
         "react-dom": "^18",
         "react-geocode": "^1.0.0-alpha.1",
         "react-icons": "^5.2.1",
         "react-map-gl": "^7.1.7",
+        "react-photoswipe-gallery": "^3.0.1",
         "react-share": "^5.1.0",
         "react-spinners": "^0.14.1",
         "react-toastify": "^10.0.5"
@@ -1766,7 +1768,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -1881,6 +1882,15 @@
         "pbf": "bin/pbf"
       }
     },
+    "node_modules/photoswipe": {
+      "version": "5.4.4",
+      "resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-5.4.4.tgz",
+      "integrity": "sha512-WNFHoKrkZNnvFFhbHL93WDkW3ifwVOXSW3w1UuZZelSmgXpIGiZSNlZJq37rR8YejqME2rHs9EhH9ZvlvFH2NA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.12.0"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
@@ -2111,6 +2121,18 @@
       "integrity": "sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew==",
       "license": "MIT"
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "node_modules/protocol-buffers-schema": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
@@ -2204,6 +2226,13 @@
         "react": "*"
       }
     },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/react-map-gl": {
       "version": "7.1.7",
       "resolved": "https://registry.npmjs.org/react-map-gl/-/react-map-gl-7.1.7.tgz",
@@ -2228,6 +2257,17 @@
         }
       }
     },
+    "node_modules/react-photoswipe-gallery": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/react-photoswipe-gallery/-/react-photoswipe-gallery-3.0.1.tgz",
+      "integrity": "sha512-5RS/72iPNMieDneAxhTB9uT39Gp9E1JAgv83FUZJzFOnZRcJezneiRuXcU+0Wi7VJ7hRU7A+R5ocZpMVacUrYA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "photoswipe": ">= 5.2.2",
+        "prop-types": ">= 15.7.0",
+        "react": ">= 16.8.0"
+      }
+    },
     "node_modules/react-share": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/react-share/-/react-share-5.1.0.tgz",
diff --git a/package.json b/package.json
index bbb64fe..9446e63 100644
--- a/package.json
+++ b/package.json
@@ -15,11 +15,13 @@
     "mongoose": "^8.5.0",
     "next": "14.2.4",
     "next-auth": "^4.24.7",
+    "photoswipe": "^5.4.4",
     "react": "^18",
     "react-dom": "^18",
     "react-geocode": "^1.0.0-alpha.1",
     "react-icons": "^5.2.1",
     "react-map-gl": "^7.1.7",
+    "react-photoswipe-gallery": "^3.0.1",
     "react-share": "^5.1.0",
     "react-spinners": "^0.14.1",
     "react-toastify": "^10.0.5"