npm i react-vertical-timeline-component

npm i @types/react-vertical-timeline-component

import { VerticalTimeline } from "react-vertical-timeline-component";
import CardHeaderCommon from '@/CommonComponent/CommonCardHeader/CardHeaderCommon';

const Timelines = () => {
  const AppIdeaText: string = "developers who are just beginning their learning process. those who often concentrate on developing programmes with a user interface.";
  const BlogTextTime = "help you build problem-solving skills, better understand the programming. ";
  const BlogTime = "If you want to improve your skills in programming.";
  const CarouselSpanText = "Spend some time looking up current design trend.";
  const [activeIndex, setActiveIndex] = useState(0);
  const [animating, setAnimating] = useState(false);

  const next = () => {
    if (animating) return;
    const nextIndex = activeIndex === carouselDataList.length - 1 ? 0 : activeIndex + 1;
    setActiveIndex(nextIndex);
  };

  const previous = () => {
    if (animating) return;
    const nextIndex = activeIndex === 0 ? carouselDataList.length - 1 : activeIndex - 1;
    setActiveIndex(nextIndex);
  };

  const goToIndex = (newIndex: number) => {
    if (animating) return;
    setActiveIndex(newIndex);
  };

  const slides = carouselDataList.map((item, index) => {
    return (
      <CarouselItem onExiting={() => setAnimating(true)} onExited={() => setAnimating(false)} key={index}><img src={`${ImagePath}/${item.image}`} alt="office-work" className="d-block w-100" /></CarouselItem>
    );
  });
  const AutoText = "So, the next time you listen to music, you might or might not consider how it's actively altering your mood.";
  const MeetUpText = "Find nearby web designers to network with! A Web Design Meetup is a place where you can discuss tools.";
  const ResolutionText = "I'm determined to streamline, organism, systematism, realign, and embrace life in 2024.";
  return (
    <Col sm="12" className="box-col-12">
      <Card>
        <CardHeaderCommon title={TimelineTitle} span={timeLineData} headClass='pb-0' />
        <CardBody className="default-timeline">
          <VerticalTimeline animate >
            <VerticalTimelineElement className="vertical-timeline-element--work " date="February 02 2024" icon={} iconClassName="cd-timeline-img cd-picture bg-primary">
              <div className="timeline-wrapper">
                <Badges color="warning">{AppIdeas}</Badges>
              </div>
              <h5 className="f-w-500 m-0">{EstablishedNewTheAppIdeaRepository}</h5>
              <p className="mb-0">{AppIdeaText}</p>
              <div className="time-content pt-2">
                <i className="icon-github"></i>
                <h6>{ViewItOnGithub}</h6>
              </div>
          </VerticalTimelineElement>
          <VerticalTimelineElement className="cd-timeline-block" date="March 12 2022" icon={} iconClassName="cd-timeline-img bg-danger">
            <div className="cd-timeline-content">
                <div className="timeline-wrapper">
                    <Badges color="danger">{BlogTimelineTitle}</Badges>
                </div>
                <h5 className="f-w-500 m-0"> {ImplementedTheProgramForWeeklyCodeChallenges}</h5>
                <p className="mb-0">
                    Challenges {BlogTextTime}{BlogTime}
                </p>
                <div className="ratio ratio-21x9 m-t-20">
                    <iframe src="https://www.youtube.com/embed/sqRk0Ly66Ps" title="myFrame" allowFullScreen></iframe>
                </div>
            </div>
          </VerticalTimelineElement>
          <VerticalTimelineElement className="cd-timeline-block" date="April 23 2022" icon={} iconClassName="cd-timeline-img cd-picture bg-success">
            <div className="cd-timeline-content">
              <div className="timeline-wrapper"><Badges color="info">{DesignerTitle}</Badges></div>
              <h5 className="f-w-500 m-0">{CarouselText}>/h5>
              <p className="mb-0">{CarouselSpanText}>/p>
              <Carousel activeIndex={activeIndex} next={next} previous={previous}>
                <CarouselIndicators items={carouselDataList} activeIndex={activeIndex} onClickHandler={goToIndex} />{slides}
                <CarouselControl direction="prev" directionText="Previous" onClickHandler={previous} />
                <CarouselControl direction="next" directionText="Next" onClickHandler={next} />
              </Carousel>
            </div>
          </VerticalTimelineElement>
          <VerticalTimelineElement className="cd-timeline-block" date="June 12 2022" icon={} iconClassName="cd-timeline-img cd-location bg-info">
            <div className="cd-timeline-content">
              <div className="timeline-wrapper">
                <Badges color="primary">{AudioTesting}</Badges>
              </div>
              <h5 className="f-w-500 m-0">{MusicalTrendsAndPredictability}</h5>
              <p className="mb-0">{AutoText}</p>
              <audio controls className="mt-3">
                <source src="../assets/audio/horse.ogg" type="audio/ogg" />
              </audio>
            </div>
          </VerticalTimelineElement>
          <VerticalTimelineElement className="cd-timeline-block" date="November 04 2022" icon={} iconClassName="cd-timeline-img cd-location bg-secondary">
            <div className="cd-timeline-content">
              <div className="timeline-wrapper">
                <Badges color="success">{MeetUpTimelineTitle}</Badges>
              </div>
              <h5 className="f-w-500 m-0">{WebDesignersMeeUp}</h5>
              <p className="mb-0">{MeetUpText}</p>
              <div className="time-content pt-2">
                <i className="icon-android"></i>
                <h6>{PleaseMeetUp}</h6>
              </div>
            </div>
          </VerticalTimelineElement>
          <VerticalTimelineElement className="cd-timeline-block" date="December 31 2022" icon={} iconClassName="cd-timeline-img cd-movie bg-danger">
            <div className="cd-timeline-content">
              <div className="timeline-wrapper">
                <Badges color="warning">{Resolutions}</Badges>
              </div>
              <h5 className="f-w-500 m-0">{MyResolutionsFor2024}</h5>
              <p className="mb-0">{ResolutionText}</p>
              <div className="time-content pt-2">
                <i className="icon-write"></i>
                <h6>{MyResolutions}</h6>
              </div>
            </div>
          </VerticalTimelineElement>
          </VerticalTimeline>
        </CardBody>
      </Card>
    </Col>
  )
}