Add arrows to scenarios

Vizzuality · Nov 13, 2024 · 1e05c05 · 1e05c05
1 parent a380ecd
commit 1e05c05
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 59 deletions.
diff --git a/src/components/arrows/index.tsx b/src/components/arrows/index.tsx
@@ -0,0 +1,46 @@
+import { cn } from "@/lib/utils";
+
+import ArrowRight from "@/svgs/arrow-right.svg";
+
+const Arrows = ({
+  changeTextIndex,
+  textIndex,
+  isMaxIndex,
+}: {
+  changeTextIndex: (index: number) => void;
+  textIndex: number;
+  isMaxIndex: boolean;
+}) => (
+  <div className="mt-1 flex items-start gap-0.5">
+    <button
+      type="button"
+      onClick={() => changeTextIndex(-1)}
+      title="Previous text"
+      disabled={textIndex === 0}
+      aria-disabled={textIndex === 0}
+    >
+      <div className="sr-only">Previous text</div>
+      <ArrowRight
+        className={cn("h-6 w-6 -rotate-180 p-[2px] text-white", {
+          "opacity-50": textIndex === 0,
+        })}
+      />
+    </button>
+    <button
+      type="button"
+      onClick={() => changeTextIndex(1)}
+      title="Next text"
+      disabled={isMaxIndex}
+      aria-disabled={isMaxIndex}
+    >
+      <div className="sr-only">Next text</div>
+      <ArrowRight
+        className={cn("h-6 w-6 p-[2px] text-white", {
+          "opacity-50": isMaxIndex,
+        })}
+      />
+    </button>
+  </div>
+);
+
+export default Arrows;
diff --git a/src/components/energy/section-7/tab-content-item.tsx b/src/components/energy/section-7/tab-content-item.tsx
@@ -1,51 +1,15 @@
-import ArrowRight from "@/svgs/arrow-right.svg";
 import { useState } from "react";
-import { cn } from "@/lib/utils";
-import { TAB_CONTENT } from "./data";
+
 import Image from "next/image";
-import { useIsMobile } from "@/lib/hooks";
+
 import { useGesture } from "@use-gesture/react";
 
-const Arrows = ({
-  changeTextIndex,
-  textIndex,
-  isMaxIndex,
-}: {
-  changeTextIndex: (index: number) => void;
-  textIndex: number;
-  isMaxIndex: boolean;
-}) => (
-  <div className="mt-1 flex items-start gap-0.5">
-    <button
-      type="button"
-      onClick={() => changeTextIndex(-1)}
-      title="Previous text"
-      disabled={textIndex === 0}
-      aria-disabled={textIndex === 0}
-    >
-      <div className="sr-only">Previous text</div>
-      <ArrowRight
-        className={cn("h-6 w-6 -rotate-180 p-[2px] text-white", {
-          "opacity-50": textIndex === 0,
-        })}
-      />
-    </button>
-    <button
-      type="button"
-      onClick={() => changeTextIndex(1)}
-      title="Next text"
-      disabled={isMaxIndex}
-      aria-disabled={isMaxIndex}
-    >
-      <div className="sr-only">Next text</div>
-      <ArrowRight
-        className={cn("h-6 w-6 p-[2px] text-white", {
-          "opacity-50": isMaxIndex,
-        })}
-      />
-    </button>
-  </div>
-);
+import { useIsMobile } from "@/lib/hooks";
+import { cn } from "@/lib/utils";
+
+import Arrows from "@/components/arrows";
+
+import { TAB_CONTENT } from "./data";
 
 const TabContentItem = ({ index = 0 }: { index: number }) => {
   const [textIndex, setTextIndex] = useState(0);

diff --git a/src/components/home/section-4/index.tsx b/src/components/home/section-4/index.tsx
@@ -8,6 +8,7 @@ import Image from "next/image";
 
 import { motion, AnimatePresence } from "framer-motion";
 
+import Arrows from "@/components/arrows";
 import ImageSliderWithText from "@/components/image-slider-with-text";
 import KnowMoreButton from "@/components/know-more-button";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -61,6 +62,10 @@ const renderText2 = (
 
 export default function Section4() {
   const [openedKnowMore, setOpenedKnowMore] = useState(false);
+  const [tabsValue, setTabsValue] = useState("scenario1");
+  const handleValueChange = (value: string) => {
+    setTabsValue(value);
+  };
 
   return (
     <section className="relative scroll-mt-8 bg-blue-950 text-white" id="section-4">
@@ -129,7 +134,7 @@ export default function Section4() {
             </AnimatePresence>
           </div>
           <div className="text-[36px] font-medium tracking-wide xl:text-4xl">What if ...</div>
-          <Tabs defaultValue="scenario1">
+          <Tabs defaultValue="scenario1" value={tabsValue} onValueChange={handleValueChange}>
             <TabsList>
               <TabsTrigger value="scenario1">Scenario 1</TabsTrigger>
               <TabsTrigger value="scenario2">Scenario 2</TabsTrigger>
@@ -140,10 +145,16 @@ export default function Section4() {
                 <div className="max-w-[320px] text-xl text-light-green">
                   ... the heatwave that affected Europe in 2018 occurred in a +2ºC warmer world ?
                 </div>
-                <div className="max-w-[466px] text-balance text-white">
-                  The digital twin allows not only to understand the conditions under which the 2018
-                  heatwave had occurred, but also to simulate how much worse could this heatwave be
-                  if it occurs under a future warmer world.
+                <div className="flex">
+                  <div className="max-w-[466px] text-balance text-white max-xl:pb-12">
+                    The digital twin allows not only to understand the conditions under which the
+                    2018 heatwave had occurred, but also to simulate how much worse could this
+                    heatwave be if it occurs under a future warmer world.
+                  </div>
+                  <Arrows
+                    textIndex={0}
+                    changeTextIndex={(index: number) => index > 0 && handleValueChange("scenario2")}
+                  />
                 </div>
               </div>
               <div className="relative xl:mt-16">
@@ -165,11 +176,19 @@ export default function Section4() {
                 <div className="max-w-[320px] text-xl text-light-green">
                   ... forest areas in a region are converted to irrigated cropland?
                 </div>
-                <div className="max-w-[466px] text-balance text-white xl:mb-20">
-                  By allowing the change of land use category from forest to cropland, the digital
-                  twin makes it possible for users to explore the effects that the reduced amount of
-                  forest land would have on variables such as the soil moisture, local precipitation
-                  and temperature.
+                <div className="flex">
+                  <div className="max-w-[466px] text-balance text-white xl:mb-20">
+                    By allowing the change of land use category from forest to cropland, the digital
+                    twin makes it possible for users to explore the effects that the reduced amount
+                    of forest land would have on variables such as the soil moisture, local
+                    precipitation and temperature.
+                  </div>
+                  <Arrows
+                    textIndex={1}
+                    changeTextIndex={(index: number) =>
+                      index > 0 ? handleValueChange("scenario3") : handleValueChange("scenario1")
+                    }
+                  />
                 </div>
                 <div className="pb-6 xl:hidden">
                   <Image src="/images/home-what-if-2-1.png" alt="" width={580} height={360} />
@@ -196,11 +215,18 @@ export default function Section4() {
                 <div className="max-w-[320px] text-xl text-light-green">
                   ... a wind farm is built in a particular location?
                 </div>
-                <div className="max-w-[466px] text-balance text-white xl:mb-20">
-                  The digital twin allows simulations of the average energy output of a wind farm
-                  built in a particular location. This type of information is key to advising the
-                  investment of wind energy planners in the deployment of a new wind farm, which
-                  needs to take into account the initial investment and future expected revenues.
+                <div className="flex">
+                  <div className="max-w-[466px] text-balance text-white xl:mb-20">
+                    The digital twin allows simulations of the average energy output of a wind farm
+                    built in a particular location. This type of information is key to advising the
+                    investment of wind energy planners in the deployment of a new wind farm, which
+                    needs to take into account the initial investment and future expected revenues.
+                  </div>
+                  <Arrows
+                    textIndex={2}
+                    changeTextIndex={(index: number) => index < 0 && handleValueChange("scenario2")}
+                    isMaxIndex
+                  />
                 </div>
                 <div className="pb-6 xl:hidden">
                   <Image src="/images/home-what-if-3-1.png" alt="" width={580} height={360} />