admin/property-pulse-nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add images to theme property page

Browse Source
This commit is contained in:
Brad Traversy
2024-07-16 11:56:52 -04:00
parent 22cdc754c0
commit 9415e1c5a2
5 changed files with 136 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/PropertyImages.jsx
+59 -31
View File
@@ -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;