110 projects page timeline component

next/app/test/projects_timeline/page.tsx

@@ -0,0 +1,20 @@
+import DateBlob from "@/components/projects/DateBlob";
+import Timeline from "@/components/projects/Timeline";
+
+
+const timelineElements = [
+  { date: new Date("2023-12-25") },
+  { date: new Date("2023-10-27") },
+  { date: new Date("2023-11-30") },
+  { date: new Date("2023-11-30") },
+  { date: new Date("2023-11-30") },
+  { date: new Date("2023-11-30") },
+  { date: new Date("2023-11-30") },
+];
+
+export default async function TestPage() {
+
+  return (
+      <Timeline timelineElements={timelineElements} />
+  );
+}

next/components/projects/DateBlob.tsx

@@ -0,0 +1,25 @@
+type DateBlobProps = {
+  date: Date;
+};
+
+const options = {
+  year: "numeric",
+  month: "long",
+  day: "numeric",
+};
+
+const DateBlob = ({timelineElement, isEven} : {timelineElement:DateBlobProps, isEven:boolean}) => {
+  return ( // change outer height element to allow for photo height etc
+    <div className="flex flex-row items-center pl-[6px] h-48">
+      <div className = "bg-white w-1 h-full mt-0"></div>
+      <div className="flex flex-row items-center h-8">
+        <div className={`bg-white h-1 ${isEven ? "w-32" : "w-20"}`}></div>
+      <div className="flex items-center justify-center bg-white w-32 h-full rounded-3xl text-black text-sm font-bold">
+        {timelineElement.date.toLocaleDateString()}
+      </div>
+      </div>
+    </div>
+  );
+};
+
+export default DateBlob;

next/components/projects/Timeline.tsx

@@ -0,0 +1,19 @@
+import DateBlob from "@/components/projects/DateBlob";
+
+
+const Timeline = ({timelineElements} : { timelineElements: { date: Date }[] }) => {
+  console.log(timelineElements);
+  return (
+      <div className="flex flex-col mt-header pl-[10%] pt-[5%] pb-[5%]">
+      <div className="h-4 w-4 bg-white rounded-full"></div>
+      <div>
+        {timelineElements.map((timelineElement, index) => (
+          <DateBlob timelineElement={timelineElement} isEven={index % 2 == 0} />
+        ))}
+      </div>
+      <div className="h-4 w-4 bg-white rounded-full"></div>
+    </div>
+  );
+};
+
+export default Timeline;