leumas-private-shared/src/Components/VerticalTimeline/VerticalTimeline.jsx

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

import React from 'react';

const VerticalTimeline = ({ timelineItems }) => {
  return (
    <ol className="relative border-l border-gray-200 dark:border-gray-700 px-8 py-6 ">
      {timelineItems?.map((item, index) => (
        <li key={index} className="mb-10">
          <span className="absolute flex items-center justify-center w-6 h-6 bg-blue-100 rounded-full -left-3 ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900">
            <svg className="w-2.5 h-2.5 text-blue-800 dark:text-blue-300" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
              {item.iconPath}
            </svg>
          </span>
          <h3 className="flex items-center mb-1 text-lg font-semibold  dark:text-white">
            {item.title}
            {item.badgeText && (
              <span className="bg-blue-100 text-blue-800 text-sm font-medium ml-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300 ml-3">
                {item.badgeText}
              </span>
            )}
          </h3>
          <time className="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">
            {item.date}
          </time>
          <p className="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">
            {item.description}
          </p>
          {item.link && (
            <a href={item.link.url} className="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:outline-none focus:ring-gray-100 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700">
              {item.link.text}
              {item.link.icon && (
                <svg className="w-3.5 h-3.5 ml-2.5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
                  {item.link.iconPath}
                </svg>
              )}
            </a>
          )}
        </li>
      ))}
    </ol>
  );
};

export default VerticalTimeline;