Skip to content

Commit

Permalink
Added timeline component
Browse files Browse the repository at this point in the history
  • Loading branch information
@AdvaitP10
AdvaitP10 committed Apr 11, 2024
1 parent 85149aa commit a0bbe23
Show file tree
Hide file tree
Showing 2 changed files with 90 additions and 43 deletions.
129 changes: 87 additions & 42 deletions frontend/src/components/ProjectTimeline.js
View file
Original file line number Diff line number Diff line change
@@ -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>
);
}
4 changes: 3 additions & 1 deletion frontend/src/pages/ProjectDetails.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</>
);
Expand Down

0 comments on commit a0bbe23

Please sign in to comment.