Merge pull request #20 from Vizzuality/ESA-story-marker-carousel

[FE]: story marker images

client/.env

@@ -0,0 +1,27 @@
+# Public url. Canonical url of the project.
+NEXT_PUBLIC_URL=http://localhost:3000
+
+# Environment. Only for development. It will be provided by Vercel otherwise.
+NEXT_PUBLIC_ENVIRONMENT=development
+
+# API Url.
+# Development, Preview, Production
+# Depending on the environment we will use different urls. It can be the same for the storybook and for the project.
+# NEXT_PUBLIC_API_URL=http://localhost:1337/api
+NEXT_PUBLIC_API_URL=https://esa-gda-comms-staging-mfafc.ondigitalocean.app/cms/api
+
+# Mapbox token
+# Development, Preview, Production
+# corresponding to the account used for this project. It can be the same for the storybook and for the project.
+NEXT_PUBLIC_MAPBOX_API_TOKEN=pk.eyJ1Ijoidml6enVhbGl0eWVzYSIsImEiOiJjbHBiNDBiNHcwZWdmMnBybDg1a253eGpoIn0.XYSrGTkz6BoR6NPdx2_tDA
+
+# Google Analytics tracking ID.
+# Development, Preview, Production
+# If you're working with an Google Analytics 4 property, you have a Measurement ID instead of a Tracking ID.
+NEXT_PUBLIC_GA_TRACKING_ID=UA-000000-2
+
+# Recoil: Remove warnings about duplicate atoms due to hot-reloading
+# Development
+RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false
+
+NEXT_PUBLIC_PREVIEW_SECRET=preview-secret

client/src/containers/map/markers/story-markers/marker.tsx

@@ -2,6 +2,10 @@ import { useState } from 'react';
 
 import { Marker } from 'react-map-gl';
 
+import Image from 'next/image';
+
+import { motion } from 'framer-motion';
+
 import { StoryStepMapMarker } from '@/types/story';
 
 import { Dialog, DialogContent } from '@/components/ui/dialog';
@@ -12,10 +16,50 @@ type StoryMarkerProps = {
   marker: StoryStepMapMarker;
 };
 
+const MOCK_IMAGES = [
+  {
+    id: 0,
+    img: '/images/mock/carousel.png',
+    legend: 'Summary of GDA Urban EO Information and Use Cases 1',
+  },
+  {
+    id: 1,
+    img: '/images/mock/carousel.png',
+    legend: 'Summary of GDA Urban EO Information and Use Cases 2',
+  },
+  {
+    id: 2,
+    img: '/images/mock/carousel.png',
+    legend: 'Summary of GDA Urban EO Information and Use Cases 3',
+  },
+];
+
 const StoryMarker = ({ marker: { media, name, id, lat, lng } }: StoryMarkerProps) => {
   const [isFullScreen, setIsFullScreen] = useState(false);
   const handleClickExpand = () => setIsFullScreen((prev) => !prev);
 
+  const [currentImage, setCurrentImage] = useState(MOCK_IMAGES[1]);
+
+  const setPrevImage = () => {
+    setCurrentImage(MOCK_IMAGES[currentImage.id - 1]);
+  };
+
+  const setNextImage = () => {
+    setCurrentImage(MOCK_IMAGES[currentImage.id + 1]);
+  };
+
+  const variants = {
+    show: {
+      opacity: 1,
+      transition: {
+        ease: 'easeOut',
+        duration: 0.3,
+      },
+    },
+    hide: {
+      opacity: 0,
+    },
+  };
   return (
     <>
       <Marker key={id} longitude={lng} latitude={lat}>
@@ -29,13 +73,68 @@ const StoryMarker = ({ marker: { media, name, id, lat, lng } }: StoryMarkerProps
         </div>
       </Marker>
       <Dialog modal onOpenChange={(open) => setIsFullScreen(open)} open={isFullScreen}>
-        <DialogContent className="h-screen w-screen bg-transparent text-white backdrop-blur-lg">
-          <StoryMarkerMedia
-            isFullScreen={isFullScreen}
-            onClickExpand={handleClickExpand}
-            media={media}
-            name={name}
-          />
+        <DialogContent className="flex h-screen w-screen flex-col items-center bg-transparent text-white backdrop-blur-lg">
+          <p className="font-notes mt-10 text-2xl text-white">
+            {currentImage.id + 1} of {MOCK_IMAGES.length}
+          </p>
+          <div className="flex h-full w-screen items-center justify-center">
+            <div className="relative flex h-3/6 w-2/12 items-center">
+              {MOCK_IMAGES[currentImage.id - 1] && (
+                <button onClick={setPrevImage} className="h-full">
+                  <Image
+                    src={MOCK_IMAGES[currentImage.id - 1].img}
+                    style={{
+                      objectFit: 'cover',
+                      height: '100%',
+                      minWidth: '100px',
+                      position: 'absolute',
+                      top: 0,
+                      right: '20%',
+                    }}
+                    height={1200}
+                    width={500}
+                    alt="mock"
+                  />
+                </button>
+              )}
+            </div>
+            <motion.div
+              key={currentImage.id}
+              className="flex w-8/12 flex-col items-center space-y-3"
+              variants={variants}
+              animate={'show'}
+              initial="hide"
+            >
+              <Image src={currentImage.img} height={1000} width={1000} alt="mock" />
+              <p className="font-sans text-sm text-white">{MOCK_IMAGES[currentImage.id].legend}</p>
+            </motion.div>
+            <motion.div
+              className="relative flex h-3/6 w-2/12 items-center"
+              key={currentImage.legend}
+              variants={variants}
+              animate={'show'}
+              initial="hide"
+            >
+              {MOCK_IMAGES[currentImage.id + 1] && (
+                <button onClick={setNextImage} className="h-full">
+                  <Image
+                    src={MOCK_IMAGES[currentImage.id + 1].img}
+                    style={{
+                      objectFit: 'cover',
+                      height: '100%',
+                      minWidth: '100px',
+                      position: 'absolute',
+                      top: 0,
+                      left: '20%',
+                    }}
+                    height={1200}
+                    width={500}
+                    alt="mock"
+                  />
+                </button>
+              )}
+            </motion.div>
+          </div>
         </DialogContent>
       </Dialog>
     </>