Fixed the TimelineObserver import

Author: sadwika-sabbella-zs

package-lock.json

@@ -1,5 +1,4 @@
-'use client'
-import React, {useEffect, useRef, useState} from 'react';
+"use client"
 import Events from "@/components/EventsTimeline";
 
 const EventsTimeline = () => {

src/app/events/page.jsx

@@ -1,11 +1,12 @@
+"use client"
 import React, { useEffect } from 'react';
 import VerticalTimeline from './VerticalTimeline';
 import events from '../app/events/events.json'
 
 const EventsTimeline = () => {
     useEffect(() => {
-        if (window.innerWidth >= 768) {
-            window.scrollBy(0, 70);
+        if (window?.innerWidth >= 768) {
+            window?.scrollBy(0, 70);
         }
     }, []);
     return (

src/components/EventsTimeline.jsx

@@ -1,8 +1,10 @@
 import React, { useEffect, useRef, useState } from "react";
+import dynamic from "next/dynamic";
 import AnimatedTimelineItem from "./AnimatedTimelineItem";
 import Image from "next/image";
 import blurCyanImage from "@/images/blur-cyan.png";
-import TimelineObserver from "react-timeline-animation";
+
+const TimelineObserver = dynamic(() => import("react-timeline-animation"), { ssr: false });
 
 const Timeline = ({ setObserver, customHeight }) => {
     const timelineRef = useRef(null);
@@ -16,7 +18,6 @@ const Timeline = ({ setObserver, customHeight }) => {
             id="timeline"
             ref={timelineRef}
             style={{ height: customHeight }}
-            
             className="absolute left-3 xs:left-0 md:left-1/2 py-8 top-0 w-1 transform md:-translate-x-1/2 md:block hidden transition-all duration-100 ease-in-out"
         />
     );
@@ -66,10 +67,7 @@ const VerticalTimeline = ({ events }) => {
 
             <div className="relative z-10">
                 {events.map((event, index) => (
-                    <div
-                        key={index}
-                        className="timeline-item"
-                    >
+                    <div key={index} className="timeline-item">
                         <AnimatedTimelineItem
                             date={event.date}
                             title={event.title}