feat(timeline): add date for mobile view

IEEE-Student-Branch-NSBM · Sep 27, 2024 · dbfc564 · dbfc564
1 parent 892761e
commit dbfc564
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/src/components/sections/Timeline.tsx b/src/components/sections/Timeline.tsx
@@ -32,6 +32,7 @@ const Timeline = () => {
 				<div className="md:col-span-4 w-full h-full md:mb-5 mb-5 col-span-8">
 					<TimelineTextContent
 						title="REGISTRATIONS OPEN"
+						date="24th September 2024"
 						description="Get ready to remark your presence in IEEE Day 2024."
 					/>
 				</div>
@@ -43,6 +44,7 @@ const Timeline = () => {
 				<div className="md:col-span-4 w-full h-full md:pt-14 mb-5 col-span-8 flex justify-center items-center md:ml-[1rem]">
 					<TimelineTextContent
 						title="REGISTRATIONS CLOSE"
+						date="28th September 2024"
 						description="Registrations are closing within a short period of time. Don’t miss your chance to be part of this incredible event!"
 					/>
 				</div>
@@ -82,6 +84,7 @@ const Timeline = () => {
 				<div className="md:col-span-4 w-full h-full md:mt-12  my-0 col-span-8">
 					<TimelineTextContent
 						title="IEEE DAY 2024"
+						date="07th September 2024"
 						description="An excitement awaits for on IEEE Day 2024! Secure your spot and be part of the celebration!"
 					/>
 				</div>

diff --git a/src/components/ui/TimelineTextContent.tsx b/src/components/ui/TimelineTextContent.tsx
@@ -1,18 +1,28 @@
+import { BsCalendarDateFill } from "react-icons/bs";
+
 interface TimelineTextContentProps {
 	title: string;
 	description: string;
+	date: string;
 }
 
 const TimelineTextContent = ({
 	title,
 	description,
+	date
 }: TimelineTextContentProps) => {
 	return (
 		<div className="w-full h-full rounded-md px-5 md:pl-4 md:pb-4">
-			<h1 className="font-sansation tracking-wider text-white text-2xl sm:text-3xl md:text-4xl lg:text-4xl font-medium pb-3 md:pb-1">
+			<h1 className="font-sansation tracking-wider text-white text-2xl sm:text-3xl md:text-4xl lg:text-4xl font-medium pb-2 md:pb-1">
 				{title}
 			</h1>
-			<p className="text-gray-100 text-lg sm:text-xl pb-5 md:w-[80%] w-[100%] md:mt-2">
+			<div className="flex items-center py-2 md:hidden ">
+				<BsCalendarDateFill className="text-gray-100 text-lg" />
+				<p className="text-gray-100 text-lg sm:text-md ml-2">
+					{date}
+				</p>
+			</div>
+			<p className="text-gray-100 text-lg sm:text-xl pb-5 md:w-[80%] w-[100%] md:mt-1">
 				{description}
 			</p>
 		</div>