From a0bbe23b99c9203db23fbf32df97cce3fbb96560 Mon Sep 17 00:00:00 2001
From: Advait Rajaram Patole <advaitpatole10@gmail.com>
Date: Fri, 12 Apr 2024 04:15:10 +0530
Subject: [PATCH] Added timeline component

---
 frontend/src/components/ProjectTimeline.js | 129 ++++++++++++++-------
 frontend/src/pages/ProjectDetails.jsx      |   4 +-
 2 files changed, 90 insertions(+), 43 deletions(-)

diff --git a/frontend/src/components/ProjectTimeline.js b/frontend/src/components/ProjectTimeline.js
index 345ccb5..ebe59b1 100644
--- a/frontend/src/components/ProjectTimeline.js
+++ b/frontend/src/components/ProjectTimeline.js
@@ -1,42 +1,87 @@
-// import { HiCalendar } from "react-icons/hi";
-
-// export default function ProjectTimeline() {
-//   return (
-//     <Timeline horizontal>
-//       <Timeline.Item>
-//         <Timeline.Point icon={HiCalendar} />
-//         <Timeline.Content>
-//           <Timeline.Time>February 2022</Timeline.Time>
-//           <Timeline.Title>Application UI code in Tailwind CSS</Timeline.Title>
-//           <Timeline.Body>
-//             Get access to over 20+ pages including a dashboard layout, charts,
-//             kanban board, calendar, and pre-order E-commerce & Marketing pages.
-//           </Timeline.Body>
-//         </Timeline.Content>
-//       </Timeline.Item>
-//       <Timeline.Item>
-//         <Timeline.Point icon={HiCalendar} />
-//         <Timeline.Content>
-//           <Timeline.Time>March 2022</Timeline.Time>
-//           <Timeline.Title>Marketing UI design in Figma</Timeline.Title>
-//           <Timeline.Body>
-//             All of the pages and components are first designed in Figma and we
-//             keep a parity between the two versions even as we update the
-//             project.
-//           </Timeline.Body>
-//         </Timeline.Content>
-//       </Timeline.Item>
-//       <Timeline.Item>
-//         <Timeline.Point icon={HiCalendar} />
-//         <Timeline.Content>
-//           <Timeline.Time>April 2022</Timeline.Time>
-//           <Timeline.Title>E-Commerce UI code in Tailwind CSS</Timeline.Title>
-//           <Timeline.Body>
-//             Get started with dozens of web components and interactive elements
-//             built on top of Tailwind CSS.
-//           </Timeline.Body>
-//         </Timeline.Content>
-//       </Timeline.Item>
-//     </Timeline>
-//   );
-// }
+export default function ProjectTimeline() {
+  return (
+    <ol className="items-center sm:flex">
+      <li className="relative mb-6 sm:mb-0">
+        <div className="flex items-center">
+          <div className="z-10 flex items-center justify-center w-6 h-6 bg-blue-100 rounded-full ring-0 ring-white dark:bg-blue-900 sm:ring-8 dark:ring-gray-900 shrink-0">
+            <svg
+              className="w-2.5 h-2.5 text-blue-800 dark:text-blue-300"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+            >
+              <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
+            </svg>
+          </div>
+          <div className="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700"></div>
+        </div>
+        <div className="mt-3 sm:pe-8">
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+            Flowbite Library v1.0.0
+          </h3>
+          <time className="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">
+            Released on December 2, 2021
+          </time>
+          <p className="text-base font-normal text-gray-500 dark:text-gray-400">
+            Get started with dozens of web components and interactive elements.
+          </p>
+        </div>
+      </li>
+      <li className="relative mb-6 sm:mb-0">
+        <div className="flex items-center">
+          <div className="z-10 flex items-center justify-center w-6 h-6 bg-blue-100 rounded-full ring-0 ring-white dark:bg-blue-900 sm:ring-8 dark:ring-gray-900 shrink-0">
+            <svg
+              className="w-2.5 h-2.5 text-blue-800 dark:text-blue-300"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+            >
+              <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
+            </svg>
+          </div>
+          <div className="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700"></div>
+        </div>
+        <div className="mt-3 sm:pe-8">
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+            Flowbite Library v1.2.0
+          </h3>
+          <time className="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">
+            Released on December 23, 2021
+          </time>
+          <p className="text-base font-normal text-gray-500 dark:text-gray-400">
+            Get started with dozens of web components and interactive elements.
+          </p>
+        </div>
+      </li>
+      <li className="relative mb-6 sm:mb-0">
+        <div className="flex items-center">
+          <div className="z-10 flex items-center justify-center w-6 h-6 bg-blue-100 rounded-full ring-0 ring-white dark:bg-blue-900 sm:ring-8 dark:ring-gray-900 shrink-0">
+            <svg
+              className="w-2.5 h-2.5 text-blue-800 dark:text-blue-300"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+            >
+              <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
+            </svg>
+          </div>
+          <div className="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700"></div>
+        </div>
+        <div className="mt-3 sm:pe-8">
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+            Flowbite Library v1.3.0
+          </h3>
+          <time className="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">
+            Released on January 5, 2022
+          </time>
+          <p className="text-base font-normal text-gray-500 dark:text-gray-400">
+            Get started with dozens of web components and interactive elements.
+          </p>
+        </div>
+      </li>
+    </ol>
+  );
+}
diff --git a/frontend/src/pages/ProjectDetails.jsx b/frontend/src/pages/ProjectDetails.jsx
index 0495c15..8987ef9 100644
--- a/frontend/src/pages/ProjectDetails.jsx
+++ b/frontend/src/pages/ProjectDetails.jsx
@@ -80,7 +80,9 @@ Prerequisites: None. Interest in image processing is appreciated. Basic knowledg
                     <p className='pt-3'>Prerequisites: BASIC PYTHON , (HTML OR STREAMLIT) , BASIC KNOWLEDGE OF NEURAL NETWORK, RNN</p>
                     {/* <p className='pt-3'>{details.prerequisites}</p> */}
                 </div>
-                {/* <ProjectTimeline/> */}
+                <div className="pt-5">
+                    <ProjectTimeline/>
+                </div>
             </div>
         </>
     );