Add images to theme property page
This commit is contained in:
Brad Traversy
@@ -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>
|
||||
@@ -518,6 +519,38 @@
|
||||
</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">
|
||||
<div
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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;
|
||||
|
||||
Generated
+41
-1
@@ -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",
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user