Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 900b1fae by jaymehta
Options

image

1 parent 00914e6b
Inline Side-by-side
Showing 1 changed file with 50 additions and 37 deletions
components/detail/DetailGallery.js
import React, { useState } from "react"; import React, { useEffect, useState } from "react";
import ImageGallery from "react-image-gallery"; import ImageGallery from "react-image-gallery";
import Image from "next/image"; import Image from "next/image";
import { cleanImage } from "../../services/imageHandling";
const DetailGallery = ({ activityById }) => { const DetailGallery = ({ activityById }) => {
console.log("activityById here", activityById);
// const images = [
// {
// original: "/images/product-gallery/01.png",
// thumbnail: "/images/product-gallery/01.png"
// },
// {
// original: "/images/product-gallery/01.png",
// thumbnail: "/images/product-gallery/01.png"
// },
// {
// original: "/images/product-gallery/01.png",
// thumbnail: "/images/product-gallery/01.png"
// },
// {
// original: "/images/product-gallery/01.png",
// thumbnail: "/images/product-gallery/01.png"
// },
// {
// original: "/images/product-gallery/01.png",
// thumbnail: "/images/product-gallery/01.png"
// },
// {
// original: "/images/product-gallery/01.png",
// thumbnail: "/images/product-gallery/01.png"
// }
// ];
// let images = [];
const [images, setimages] = useState([]);
useEffect(() => {
setimages(
activityById &&
activityById.data.attributes.imagesComponent.map(item => {
return {
original: cleanImage(item.image.data.attributes),
thumbnail: cleanImage(item.image.data.attributes)
};
})
);
}, [activityById]);
const images = [
{
original: "/images/product-gallery/01.png",
thumbnail: "/images/product-gallery/01.png"
},
{
original: "/images/product-gallery/01.png",
thumbnail: "/images/product-gallery/01.png"
},
{
original: "/images/product-gallery/01.png",
thumbnail: "/images/product-gallery/01.png"
},
{
original: "/images/product-gallery/01.png",
thumbnail: "/images/product-gallery/01.png"
},
{
original: "/images/product-gallery/01.png",
thumbnail: "/images/product-gallery/01.png"
},
{
original: "/images/product-gallery/01.png",
thumbnail: "/images/product-gallery/01.png"
}
];
return ( return (
<> <>
<div className="product-info hide-on-desktop"> <div className="product-info hide-on-desktop">
...@@ -56,16 +68,17 @@ const DetailGallery = ({ activityById }) => { ...@@ -56,16 +68,17 @@ const DetailGallery = ({ activityById }) => {
<div className="product-name">Edge City Climb</div> <div className="product-name">Edge City Climb</div>
</div> </div>
</div> </div>
<div className="product-gallery"> {activityById && (
<div className="row"> <div className="product-gallery">
<div className="col-12"> <div className="row">
<div className="product-gallery-item"> <div className="col-12">
<ImageGallery showNav={false} showPlayButton={false} items={images} /> <div className="product-gallery-item">
<ImageGallery showNav={false} showPlayButton={false} items={images} />
</div>
</div> </div>
</div> </div>
</div> </div>
)}
</div>
</> </>
); );
}; };
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!