Skip to content

Commit

Permalink
Fixed the TimelineObserver import
Browse files Browse the repository at this point in the history
  • Loading branch information
sadwika-sabbella-zs committed Dec 17, 2024
1 parent 5579bea commit b8d5c0e
Show file tree
Hide file tree
Showing 4 changed files with 18 additions and 10 deletions.
10 changes: 10 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 1 addition & 2 deletions src/app/events/page.jsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
'use client'
import React, {useEffect, useRef, useState} from 'react';
"use client"
import Events from "@/components/EventsTimeline";

const EventsTimeline = () => {
Expand Down
5 changes: 3 additions & 2 deletions src/components/EventsTimeline.jsx
Original file line number Diff line number Diff line change
@@ -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 (
Expand Down
10 changes: 4 additions & 6 deletions src/components/VerticalTimeline.jsx
Original file line number Diff line number Diff line change
@@ -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);
Expand All @@ -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"
/>
);
Expand Down Expand Up @@ -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}
Expand Down

0 comments on commit b8d5c0e

Please sign in to comment.