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({