Update story

client/src/components/map/layers/marker/index.tsx

@@ -14,9 +14,9 @@ type MarkerProps = RMarkerProps & {
 };
 
 const Marker = (props: MarkerProps) => {
-  const { properties, onClick } = props;
+  const { properties, onClick, ...rest } = props;
   return (
-    <RMarker {...props}>
+    <RMarker {...properties} {...rest}>
       <Tooltip open delayDuration={0}>
         <TooltipTrigger asChild>
           <div
@@ -27,12 +27,12 @@ const Marker = (props: MarkerProps) => {
           >
             <div
               className={cn({
-                'absolute left-1/2 top-1/2 flex h-3 w-3 -translate-x-1/2 -translate-y-1/2 rotate-45 items-center justify-center border border-[#FFE094] transition-all':
+                'absolute left-1/2 top-1/2 flex h-3 w-3 -translate-x-1/2 -translate-y-1/2 rotate-45 items-center justify-center border-[1.5px] border-[#FFE094] transition-all':
                   true,
-                'scale-[2] bg-[#FFE094]': true,
+                'bg-background scale-[1.25] border-gray-200': true,
               })}
             >
-              <div className="h-1.5 w-1.5 bg-[#FFE094]"></div>
+              <div className="h-[5px] w-[5px] bg-gray-200"></div>
             </div>
           </div>
         </TooltipTrigger>
@@ -55,6 +55,7 @@ const Marker = (props: MarkerProps) => {
               variant="secondary"
               className="h-8 w-full rounded-3xl bg-teal-500 py-2 text-xs text-white hover:bg-teal-500/50"
               onClick={onClick}
+              disabled={!properties?.active}
             >
               Discover story
             </Button>

client/src/containers/home/index.tsx

@@ -42,12 +42,12 @@ export default function Home() {
       <Filters />
       <div className="mt-12 flex flex-1 justify-between">
         <Sidebar>
-          <div className="2xl:w-70 w-64">
+          <div className="2xl:w-70 w-[280px]">
             <Dashboard />
           </div>
         </Sidebar>
         <Sidebar>
-          <div className="2xl:w-70 w-64">
+          <div className="2xl:w-70 w-[280px]">
             <Card title="Impact indicator">
               <a
                 target="_blank"
@@ -57,7 +57,7 @@ export default function Home() {
               </a>
             </Card>
             <GradientLine />
-            <Card title="Top stories (6)">
+            <Card title="Top stories (5)">
               <TopStories />
             </Card>
           </div>

client/src/containers/home/top-stories/index.tsx

@@ -1,53 +1,9 @@
 import TopStoriesItem from './item';
-
-const topStories = [
-  {
-    id: '1',
-    title: 'From Coastlines to Space: EO Satellites for Advanced Risk Assessment ',
-    place: 'Warri',
-    country: 'Nigeria',
-    image: '/images/story-card-image.png',
-  },
-  {
-    id: '2',
-    title: 'From Coastlines to Space: EO Satellites for Advanced Risk Assessment ',
-    place: 'Warri',
-    country: 'Nigeria',
-    image: '/images/story-card-image.png',
-  },
-  {
-    id: '3',
-    title: 'From Coastlines to Space: EO Satellites for¡ Advanced Risk Assessment ',
-    place: 'Warri',
-    country: 'Nigeria',
-    image: '/images/story-card-image.png',
-  },
-  {
-    id: '4',
-    title: 'From Coastlines to Space: EO Satellites for Advanced Risk Assessment ',
-    place: 'Warri',
-    country: 'Nigeria',
-    image: '/images/story-card-image.png',
-  },
-  {
-    id: '5',
-    title: 'From Coastlines to Space: EO Satellites for¡ Advanced Risk Assessment ',
-    place: 'Warri',
-    country: 'Nigeria',
-    image: '/images/story-card-image.png',
-  },
-  {
-    id: '6',
-    title: 'From Coastlines to Space: EO Satellites for Advanced Risk Assessment ',
-    place: 'Warri',
-    country: 'Nigeria',
-    image: '/images/story-card-image.png',
-  },
-];
+import topStories from './mockup.json';
 
 const TopStories = () => {
   return (
-    <div className="max-h-[45vh] space-y-4 overflow-y-auto">
+    <div className="max-h-[35vh] space-y-4 overflow-y-auto">
       {topStories.map((story) => (
         <TopStoriesItem key={story.id} story={story} />
       ))}

client/src/containers/home/top-stories/item.tsx

@@ -1,31 +1,41 @@
 import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+
+import { cn } from '@/lib/classnames';
 
 type TopStoriesItemProps = {
   story: {
     title: string;
-    place: string;
-    country: string;
+    region: string;
     id: string;
     image: string;
+    active: boolean;
   };
 };
 
 const TopStoriesItem = ({ story }: TopStoriesItemProps) => {
+  const { push } = useRouter();
+
+  const handleClickStory = () => {
+    if (story.active) {
+      push(`/stories/${story.id}`);
+    }
+  };
+
   return (
-    <div className="flex gap-2">
-      <div className="shrink-0">
+    <div onClick={handleClickStory} className={cn('flex gap-2', story.active && 'cursor-pointer')}>
+      <div className="h-[72px] w-[72px] shrink-0 overflow-hidden rounded-full">
         <Image
           alt={story.title}
-          src={`${process.env.NEXT_PUBLIC_BASE_PATH}/images/story-card-image.png`}
+          src={story.image}
           width={72}
           height={72}
+          className="h-full w-full object-cover object-center"
         />
       </div>
       <div className="space-y-1 text-gray-300">
         <h3 className="text-sm font-bold leading-4 text-gray-300">{story.title}</h3>
-        <p className="font-open-sans text-xs font-light italic">
-          {story.place}, {story.country}
-        </p>
+        <p className="font-open-sans text-xs font-light italic">{story.region}</p>
       </div>
     </div>
   );

client/src/containers/home/top-stories/mockup.json

@@ -0,0 +1,41 @@
+[
+  {
+    "id": "1",
+    "title": "Urban Sustainability: Updating the Revised Strategic Transport Plan for Dhaka, Bangladesh",
+    "region": "Dhaka, Bangladesh",
+    "image": "/images/mock/top-stories/story-1.png",
+    "active": true
+  },
+
+  {
+    "id": "2",
+    "title": "Urban Wetlands: EO-based tools to support wetland restoration in Rwanda",
+    "region": "Kigali, Ruanda",
+    "image": "/images/mock/top-stories/story-2.jpeg",
+    "active": false
+  },
+
+  {
+    "id": "3",
+    "title": "Soil monitoring helps build climate resilience for Nigeria's farmers",
+    "region": "Nigeria",
+    "image": "/images/mock/top-stories/story-3.jpeg",
+    "active": false
+  },
+
+  {
+    "id": "4",
+    "title": "Satellite Data and Sustainability-Linked Bonds: Monitoring Land Use in Peruvian Amazon",
+    "region": "Peru",
+    "image": "/images/mock/top-stories/story-4.jpeg",
+    "active": false
+  },
+
+  {
+    "id": "5",
+    "title": "Changing Grey to Green in Sargodha, Pakistan - Using Satellite Earth Observation",
+    "region": "Sargodha, Pakistan",
+    "image": "/images/mock/top-stories/story-5.png",
+    "active": false
+  }
+]

client/src/containers/map/markers/home-markers/index.tsx

@@ -45,6 +45,7 @@ const StoryMarkers = () => {
               status: 'completed',
               tags: ['nature'],
               title: attributes?.title,
+              active: attributes?.active,
             },
           };
         }) || [],

client/src/containers/story/steps/index.tsx

@@ -3,6 +3,8 @@ import { PropsWithChildren, useMemo } from 'react';
 
 import { useRecoilValue } from 'recoil';
 
+import { cn } from '@/lib/classnames';
+
 import { stepAtom } from '@/store/stories';
 
 import {
@@ -26,9 +28,9 @@ type StepProps = PropsWithChildren<{
 
 const Step = ({ step, category, index }: StepProps) => {
   const currentStep = useRecoilValue(stepAtom);
+  const type = getStepType(step);
 
   const STEP_COMPONENT = useMemo(() => {
-    const type = getStepType(step);
     const stepLayout = step?.attributes?.layout?.[0];
     if (!type || !stepLayout) return null;
 
@@ -56,11 +58,18 @@ const Step = ({ step, category, index }: StepProps) => {
       default:
         return null;
     }
-  }, [category?.data?.attributes, category?.data?.id, step, index, currentStep]);
+  }, [
+    step?.attributes?.layout,
+    type,
+    currentStep,
+    index,
+    category?.data?.id,
+    category?.data?.attributes,
+  ]);
 
   return (
     <div className="pointer-events-none h-screen w-full ">
-      <div className="h-full w-full px-14">{STEP_COMPONENT}</div>
+      <div className={cn('h-full w-full', type !== 'outro-step' && 'px-14')}>{STEP_COMPONENT}</div>
     </div>
   );
 };

client/src/containers/story/steps/layouts/outro-step.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useEffect, useRef, useState } from 'react';
 
+import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 
 import { useScroll, motion, useTransform } from 'framer-motion';
@@ -11,16 +12,27 @@ import env from '@/env.mjs';
 
 import { isFlyingBackAtom } from '@/store';
 
-import { StepLayoutItem, StepLayoutOutroStepComponent } from '@/types/generated/strapi.schemas';
-
-const apiBaseUrl = env.NEXT_PUBLIC_API_URL.replace('/api', '');
+import { StepLayoutOutroStepComponent } from '@/types/generated/strapi.schemas';
 
 type MediaStepLayoutProps = {
-  step: StepLayoutItem;
+  step: StepLayoutOutroStepComponent;
   categoryId?: number;
   showContent: boolean;
 };
 
+const links = [
+  [
+    'https://www.gaf.de/',
+    '',
+    'https://site.tre-altamira.com/',
+    'http://www.gisat.cz/',
+    'https://www.ait.ac.at/en/',
+    'https://www.caribou.space/',
+  ],
+  ['https://www.adb.org/'],
+  ['https://www.esa.int/'],
+];
+
 const OutroStepLayout = ({ step, showContent }: MediaStepLayoutProps) => {
   const { push } = useRouter();
 
@@ -91,7 +103,7 @@ const OutroStepLayout = ({ step, showContent }: MediaStepLayoutProps) => {
           >
             <div className="h-full w-full bg-slate-900/60"></div>
           </motion.div>
-          <div className="pointer-events-auto flex w-full flex-1 items-center justify-between">
+          <div className="pointer-events-auto flex w-full flex-1 flex-col items-center justify-between p-10">
             <div className="flex w-full flex-1 flex-col justify-between gap-12 lg:flex-row">
               {isVideo && (
                 <motion.div
@@ -125,7 +137,7 @@ const OutroStepLayout = ({ step, showContent }: MediaStepLayoutProps) => {
                 transition={{ duration: 1.5 }}
                 style={{ scale: scaleContent }}
               >
-                <div className="max-w-lg space-y-4">
+                <div className="max-w-lg space-y-4 p-10">
                   <h3 className="text-enlight-yellow-500 text-2xl font-bold tracking-wider">
                     {title}
                   </h3>
@@ -134,15 +146,65 @@ const OutroStepLayout = ({ step, showContent }: MediaStepLayoutProps) => {
               </motion.div>
             </div>
           </div>
+
           <motion.div
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             transition={{ duration: 2.5 }}
             style={{ scale }}
-            className="font-notes z-10 w-full place-self-end pb-[10vh] text-center text-sm italic text-white"
+            className="font-notes z-10 w-full space-y-4 place-self-end pb-[10vh] text-center text-sm italic text-white"
           >
-            Continue scrolling to explore more stories
+            <p>Continue scrolling to explore more stories</p>
           </motion.div>
+          {showContent && show && step.disclaimer && (
+            <div className="font-notes pointer-events-auto relative w-screen bg-white p-4 text-xs italic text-black">
+              <ul className="flex items-center justify-center gap-x-10 gap-y-2">
+                {step.disclaimer.map((d, i) => (
+                  <li key={i} className="flex items-center gap-2">
+                    <p>{d.title}</p>
+                    <div className="flex gap-2">
+                      {d.logos &&
+                        d.logos?.data?.map((logo, index) => {
+                          const src =
+                            env.NEXT_PUBLIC_ENVIRONMENT === 'development'
+                              ? `${env.NEXT_PUBLIC_API_URL.replace('/api', '')}${
+                                  logo?.attributes?.url
+                                }`
+                              : logo?.attributes?.url || '';
+                          const url = links[i][index];
+                          return url ? (
+                            <a
+                              key={logo?.attributes?.url}
+                              href={links[i][index]}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                            >
+                              <Image
+                                src={src}
+                                width={50}
+                                height={30}
+                                alt=""
+                                className="h-8 w-full object-contain object-center"
+                              />
+                            </a>
+                          ) : (
+                            <div>
+                              <Image
+                                src={src}
+                                width={50}
+                                height={30}
+                                alt=""
+                                className="h-8 w-full object-contain object-center"
+                              />
+                            </div>
+                          );
+                        })}
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
         </motion.div>
       )}
     </div>