Timeline

The RhTimeline component provides a way to create a timeline with customized styling options, allowing for greater flexibility and control over the appearance of the timeline in a web application.

Usage

Once installed, you can import the RhTimeline component into your React application:

copy

import {RhTimeline} from "@rhythm-ui/react"

Then, you can use the RhTimeline component in your JSX code:

copy

function DefaultTimeline() {
  const data = {
    title: "Frontend Web Developer",
    description:
      "Tata Consultancy Services Digital • bangalore urban, karnataka, india",
  };
  return (
    <RhTimeline>
      {Array(5)
        .fill(data)
        .map((item) => (
          <RhTimelineItem>
            <div
              className="lg:col-span-8 col-span-8 pl-4 pt-6 flex lg:items-center 
                  lg:justify-between lg:flex-row flex-col relative lg:py-6 py-4"
            >
              <div>
                <div className="flex">
                  <div className="flex items-start">
                    <p className="text-base text-gray-gray9 font-semibold relative mr-2">
                      {item.title}
                    </p>
                  </div>
                  <p className="flex items-center pl-1 cursor-pointer" />
                </div>
                <p className="lg:text-base text-sm text-gray-gray9 mt-1 capitalize">
                  {item.description}
                </p>
                <div />
              </div>
            </div>
          </RhTimelineItem>
        ))}
    </RhTimeline>
  );
}

Timeline Props

Name	Type	Description
align	"left" \| "right" \| "alternate"	Sets alignment of the timeline items
timelineLineClass	string	The timeline line is the vertical line that runs along the length of the timeline and connects the circles. This prop can be used to style the timeline line with CSS.
timelineCircleClass	string	The timeline circles are the circular elements that denote events or milestones on the timeline. This prop can be used to style the timeline circles with CSS.

Left Aligned

The align prop value is set to left to align the timeline to the left of the content.

copy

function DefaultTimeline() {
  const data = {
    title: "Frontend Web Developer",
    description:
      "Tata Consultancy Services Digital • bangalore urban, karnataka, india",
  };
  return (
    <RhTimeline align="left">
      {Array(5)
        .fill(data)
        .map((item) => (
          <RhTimelineItem>
            <div
              className="lg:col-span-8 col-span-8 pl-4 pt-6 flex lg:items-center 
                  lg:justify-between lg:flex-row flex-col relative lg:py-6 py-4"
            >
              <div>
                <div className="flex">
                  <div className="flex items-start">
                    <p className="text-base text-gray-gray9 font-semibold relative mr-2">
                      {item.title}
                    </p>
                  </div>
                  <p className="flex items-center pl-1 cursor-pointer" />
                </div>
                <p className="lg:text-base text-sm text-gray-gray9 mt-1 capitalize">
                  {item.description}
                </p>
                <div />
              </div>
            </div>
          </RhTimelineItem>
        ))}
    </RhTimeline>
  );
}

Middle aligned

The align prop value is set to alternate to align the timeline in the middle of the content.

copy

function DefaultTimeline() {
  const data = {
    title: "Frontend Web Developer",
    description:
      "Tata Consultancy Services Digital • bangalore urban, karnataka, india",
  };
  return (
    <RhTimeline align="alternate">
      {Array(5)
        .fill(data)
        .map((item) => (
          <RhTimelineItem>
            <div
              className="lg:col-span-8 col-span-8 pl-4 pt-6 flex 
                    lg:items-center lg:justify-between lg:flex-row flex-col relative lg:py-6 py-4"
            >
              <div>
                <div className="flex">
                  <div className="flex items-start">
                    <p className="text-base text-gray-gray9 font-semibold relative mr-2">
                      {item.title}
                    </p>
                  </div>
                  <p className="flex items-center pl-1 cursor-pointer" />
                </div>
                <p className="lg:text-base text-sm text-gray-gray9 mt-1 mr-4 capitalize">
                  {item.description}
                </p>
                <div />
              </div>
            </div>
          </RhTimelineItem>
        ))}
    </RhTimeline>
  );
}