From 4c955e3d48b39f1eb2891ef4195c304f243f3047 Mon Sep 17 00:00:00 2001 From: Alvaro Date: Tue, 29 Oct 2024 15:28:38 +0100 Subject: [PATCH] Fix warnings and lines --- src/components/energy/intro/index.tsx | 12 +++--------- src/components/energy/section-1/index.tsx | 10 +++++++--- src/components/home/section-1/index.tsx | 3 ++- src/components/home/section-2/index.tsx | 3 ++- src/components/home/section-3/index.tsx | 3 ++- src/components/home/section-4/index.tsx | 3 ++- src/components/home/section-5/index.tsx | 3 ++- src/components/lines/index.tsx | 8 ++++---- src/lib/hooks.ts | 8 +++++++- 9 files changed, 31 insertions(+), 22 deletions(-) diff --git a/src/components/energy/intro/index.tsx b/src/components/energy/intro/index.tsx index 543eaad..9737eba 100644 --- a/src/components/energy/intro/index.tsx +++ b/src/components/energy/intro/index.tsx @@ -1,15 +1,9 @@ -'use client'; - -import Lines from '@/components/lines'; import Image from 'next/image'; +import dynamic from 'next/dynamic' +const Lines = dynamic(() => import('@/components/lines'), { ssr: false }) + export default function Intro() { - const handleAnchor = (anchor: string) => { - const element = document.getElementById(anchor); - if (element) { - element.scrollIntoView({ behavior: "smooth", block: "start" }); - } - } return (
diff --git a/src/components/energy/section-1/index.tsx b/src/components/energy/section-1/index.tsx index ab2c426..360ec11 100644 --- a/src/components/energy/section-1/index.tsx +++ b/src/components/energy/section-1/index.tsx @@ -1,12 +1,14 @@ 'use client'; -import Lines from "@/components/lines"; + +import dynamic from 'next/dynamic'; import Image from "next/image"; import { useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import KnowMoreButton from "@/components/know-more-button"; import { cn } from "@/lib/utils"; -import FadeIn from "@/components/animations/fade-in"; import { useIsMobile } from "@/lib/hooks"; +const FadeIn = dynamic(() => import('@/components/animations/fade-in'), { ssr: false }); +const Lines = dynamic(() => import('@/components/lines'), { ssr: false }); export default function Section1() { const [openedKnowMore, setOpenedKnowMore] = useState(false); @@ -35,13 +37,14 @@ export default function Section1() { - +

The green transition boosts resilience to climate disruptions through renewable energy and advanced digital simulations.

setOpenedKnowMore(!openedKnowMore)} opened={openedKnowMore} /> {openedKnowMore && setOpenedKnowMore(!openedKnowMore)} opened={openedKnowMore} /> {openedKnowMore && import('@/components/lines'), { ssr: false }); import Image from "next/image"; import { useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; diff --git a/src/components/home/section-2/index.tsx b/src/components/home/section-2/index.tsx index cda363d..7d8d457 100644 --- a/src/components/home/section-2/index.tsx +++ b/src/components/home/section-2/index.tsx @@ -1,7 +1,8 @@ 'use client'; import { useRef, useEffect, useState, useMemo } from 'react'; -import Lines from "@/components/lines"; +import dynamic from 'next/dynamic'; +const Lines = dynamic(() => import('@/components/lines'), { ssr: false }); import GlobeMap from "@/components/globe-map"; import { Resizable } from 're-resizable'; import { Button } from "@/components/button"; diff --git a/src/components/home/section-3/index.tsx b/src/components/home/section-3/index.tsx index f579656..34ec0ce 100644 --- a/src/components/home/section-3/index.tsx +++ b/src/components/home/section-3/index.tsx @@ -1,5 +1,6 @@ 'use client'; -import Lines from "@/components/lines"; +import dynamic from 'next/dynamic'; +const Lines = dynamic(() => import('@/components/lines'), { ssr: false }); import Image from "next/image"; import { useEffect, useRef, useState } from "react"; import { AnimatePresence, motion, useInView } from "framer-motion"; diff --git a/src/components/home/section-4/index.tsx b/src/components/home/section-4/index.tsx index c712b20..0c63b31 100644 --- a/src/components/home/section-4/index.tsx +++ b/src/components/home/section-4/index.tsx @@ -1,6 +1,7 @@ 'use client'; import { useState } from "react"; -import Lines from "@/components/lines"; +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/components/home/section-5/index.tsx b/src/components/home/section-5/index.tsx index 03c9f73..51b4c9b 100644 --- a/src/components/home/section-5/index.tsx +++ b/src/components/home/section-5/index.tsx @@ -1,5 +1,6 @@ 'use client'; -import Lines from "@/components/lines"; +import dynamic from 'next/dynamic'; +const Lines = dynamic(() => import('@/components/lines'), { ssr: false }); import Image from "next/image"; import InfoPopover from "@/components/info-popover"; diff --git a/src/components/lines/index.tsx b/src/components/lines/index.tsx index d15c7b5..f15a281 100644 --- a/src/components/lines/index.tsx +++ b/src/components/lines/index.tsx @@ -63,7 +63,7 @@ const Lines = ({ return <> {/* Vertical lines */} -
+
( )) : ( @@ -89,13 +89,13 @@ const Lines = ({
{/* Horizontal lines */} -
+
{rows.map((y, index) => ( ))}
diff --git a/src/lib/hooks.ts b/src/lib/hooks.ts index ecafa80..a52b93c 100644 --- a/src/lib/hooks.ts +++ b/src/lib/hooks.ts @@ -21,8 +21,14 @@ export const useScreenWidthWithResize = () => { }; export const useIsMobile = () => { + const [isMobile, setIsMobile] = useState(false); const isDesktopOrLaptop = useMediaQuery({ query: "(min-width: 1224px)", }); - return !isDesktopOrLaptop; + + useEffect(() => { + setIsMobile(!isDesktopOrLaptop); + }, [isDesktopOrLaptop]); + + return isMobile; };