From 539f71f1bc8782c045a6a5e51b5492f642f597ca Mon Sep 17 00:00:00 2001 From: Alvaro Date: Thu, 31 Oct 2024 13:42:20 +0100 Subject: [PATCH] Energy section 6. Needs final videos and legend --- src/app/case-study-energy/page.tsx | 2 + src/components/energy/section-3/index.tsx | 2 +- src/components/energy/section-6/index.tsx | 112 ++++++++++++++++++++++ src/components/energy/section-7/index.tsx | 1 - src/lib/hooks.ts | 23 +++++ 5 files changed, 138 insertions(+), 2 deletions(-) create mode 100644 src/components/energy/section-6/index.tsx diff --git a/src/app/case-study-energy/page.tsx b/src/app/case-study-energy/page.tsx index 2dd6cc9..a8fa3c1 100644 --- a/src/app/case-study-energy/page.tsx +++ b/src/app/case-study-energy/page.tsx @@ -2,6 +2,7 @@ import Intro from '@/components/energy/intro'; import Section1 from '@/components/energy/section-1'; import Section3 from '@/components/energy/section-3'; import Section5 from '@/components/energy/section-5'; +import Section6 from '@/components/energy/section-6'; import Section7 from '@/components/energy/section-7'; export default function Energy() { @@ -11,6 +12,7 @@ export default function Energy() { + ); diff --git a/src/components/energy/section-3/index.tsx b/src/components/energy/section-3/index.tsx index 73b81c5..519e4d0 100644 --- a/src/components/energy/section-3/index.tsx +++ b/src/components/energy/section-3/index.tsx @@ -22,7 +22,7 @@ export default function Section3() {
{/* Decorative div to continue previous section */}
- +
{isMobile ?
diff --git a/src/components/energy/section-6/index.tsx b/src/components/energy/section-6/index.tsx new file mode 100644 index 0000000..9efdc2a --- /dev/null +++ b/src/components/energy/section-6/index.tsx @@ -0,0 +1,112 @@ +'use client'; +import { useRef } from "react"; +import dynamic from 'next/dynamic'; +const Lines = dynamic(() => import('@/components/lines'), { ssr: false }); +import { useState } from "react"; +import { cn } from "@/lib/utils"; +import { useScreenWidthWithResize, useContainerWidthWithResize } from "@/lib/hooks"; +import { Resizable } from "re-resizable"; +import { Button } from "@/components/button"; +import CaretRight from "@/svgs/caret-right.svg"; +import Image from "next/image"; + +const ResizeButton = () => ( + <> + + +); + +export default function Section6() { + const containerRef = useRef(null); + const containerWidth = useContainerWidthWithResize(containerRef); + + const [resizableWidth, setResizableWidth] = useState(550); + const [resizableCurrentWidth, setResizableCurrentWidth] = useState(550); + const legend =
+
+
LOW (XXº)
+
HIGH (XXº)
+
+ legend +
; + return ( +
+
+ +
+
+ {legend} +
+
+ { + setResizableCurrentWidth(resizableWidth + d.width); + }} + onResizeStop={(e, direction, ref, d) => { + setResizableWidth(resizableWidth + d.width); + }} + maxWidth={(containerWidth || 1000) - 200} + minWidth="200" + handleComponent={{ + right: , + }} + > +
+
+ +
+
+
+
SIM. 01
+
Present-day
+
+
In the case of the 2018 heatwave, maximum temperatures were well captured in valley and mountain ridges such as the Pyrinees, while some differences in maximum temperature remained along the Portuguese western coast.
+
+
+ +
+ + {/* Right video */} +
+ +
((containerWidth || 800) - 400), + })} + style={{ + transform: `translateX(${resizableCurrentWidth}px)` + }}> +
+
SIM. 02
+
Present-day
+
+
In the case of the 2018 heatwave, maximum temperatures were well captured in valley and mountain ridges such as the Pyrinees, while some differences in maximum temperature remained along the Portuguese western coast.
+
+
+
+
+
); +}; \ No newline at end of file diff --git a/src/components/energy/section-7/index.tsx b/src/components/energy/section-7/index.tsx index d1bef0f..de82cb5 100644 --- a/src/components/energy/section-7/index.tsx +++ b/src/components/energy/section-7/index.tsx @@ -1,7 +1,6 @@ 'use client'; import { useState } from "react"; import dynamic from 'next/dynamic'; -const Lines = dynamic(() => import('@/components/lines'), { ssr: false }); import { motion, AnimatePresence } from "framer-motion"; import KnowMoreButton from "@/components/know-more-button"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; diff --git a/src/lib/hooks.ts b/src/lib/hooks.ts index a52b93c..eee7a2b 100644 --- a/src/lib/hooks.ts +++ b/src/lib/hooks.ts @@ -20,6 +20,29 @@ export const useScreenWidthWithResize = () => { return width; }; +export const useContainerWidthWithResize = (containerRef: React.RefObject) => { + const [containerWidth, setContainerWidth] = useState(0); + // Set initial width on mount. Window is not available on server side. + useEffect(() => { + if (containerRef.current) { + setContainerWidth(containerRef.current.offsetWidth); + } + }, [containerRef]); + + const handleResize = useCallback(() => { + if (containerRef.current) { + setContainerWidth(containerRef.current.offsetWidth); + } + }, [containerRef]); + + useEffect(() => { + window.addEventListener("resize", handleResize); + return () => window.removeEventListener("resize", handleResize); + }, [containerRef]); + + return containerWidth; +}; + export const useIsMobile = () => { const [isMobile, setIsMobile] = useState(false); const isDesktopOrLaptop = useMediaQuery({