Merge pull request #146 from UoaWDCC/109_projects-image-component-sty…

…ling 109 Projects Image Component Styling
UoaWDCC · Oct 21, 2024 · 8d5412a · 8d5412a
2 parents f6df90e + 7c0ef4e
commit 8d5412a
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 8 deletions.
diff --git a/next/components/projects/DateBlob.tsx b/next/components/projects/DateBlob.tsx
@@ -5,16 +5,28 @@ type DateBlobProps = {
 const DateBlob = ({
   timelineElement,
   isEven,
+  type,
 }: {
   timelineElement: DateBlobProps;
   isEven: boolean;
+  type: "current" | "old";
 }) => {
   const dateOptions = {
     year: "numeric",
     month: "short",
     day: "numeric",
   } as const; // As const ensures it's a literal type not strings as toLocaleDateString expects a literal type
 
+//   <div
+//   className={`flex flex-row items-center pl-[6px] ${type === "current" ? "h-96" : "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>
+
   return (
     <div className="flex items-center h-8">
       <div className={`bg-white h-1 ${isEven ? "w-32" : "w-20"}`}></div>

diff --git a/next/components/projects/ProjectsComponent.tsx b/next/components/projects/ProjectsComponent.tsx
@@ -36,15 +36,24 @@ export default function ProjectsComponent({
     <div className="flex ml-4 sm:ml-10 md:ml-0 items-center pl-[6px] p-4">
       {/* Vertical line, -my-4 to 'undo' the p-4 */}
       <div className="bg-white w-1 self-stretch -my-4" />
-      <div className="flex flex-col gap-7 md:flex-row">
+
+      <DateBlob timelineElement={timelineElement} isEven={isEven} type={type} />
+      <ImageComponent
+        src={getLargestImageUrl(timelineElement.image)}
+        title={timelineElement.title}
+        type={type}
+        openModal={openModal}
+      />
+
+      {/* <div className="flex flex-col gap-7 md:flex-row">
         <DateBlob timelineElement={timelineElement} isEven={isEven} />
         <ImageComponent
           src={getLargestImageUrl(timelineElement.image)}
           title={timelineElement.title}
           type={type}
           openModal={openModal}
         />
-      </div>
+      </div> */}
     </div>
   );
 }
diff --git a/next/components/projects/ProjectsImage.tsx b/next/components/projects/ProjectsImage.tsx
@@ -5,6 +5,23 @@ type ImageComponentProps = {
   alt?: string;
   title: string;
   type: "current" | "old";
+
+  // }) {
+  //   const height = type === "current" ? 350 : 100;
+
+  //   return (
+  //     <div
+  //       className="w-[600px] relative flex justify-center"
+  //       style={{ height: `${height}px` }}
+  //     >
+  //       <div>
+  //         <Image
+  //           src={src}
+  //           alt={alt || ""}
+  //           className="absolute inset-0 -z-10 w-full h-full object-cover brightness-75 opacity-85 rounded-[50px]"
+  //           width={300}
+  //           height={height}
+
   openModal: () => void;
 };
 
@@ -15,20 +32,54 @@ export default function ImageComponent({
   type,
   openModal,
 }: ImageComponentProps) {
-  const width = type === "current" ? 150 : 100;
+  const heightstyle = type === "current" ? "h-[300px]" : "h-[100px]";
+  const height = type === "current" ? 300 : 100;
 
   return (
-    <div className={`w-[${width}px] h-[100px] relative ml-8`} onClick={openModal}>
+    <div
+      // className={`h-96 w-[600px] relative ml-8`}
+      className={`${heightstyle} w-[600px] relative ml-8`}
+      onClick={openModal}
+    >
       <div>
         <Image
           src={src}
           alt={alt}
-          className="absolute inset-0 -z-10 w-full h-full object-cover brightness-50 rounded-[50px]"
-          width={width}
-          height={100}
+          className="absolute inset-0 -z-10 w-full h-full object-cover brightness-75 opacity-85 rounded-[50px]"
+          width={300}
+          height={height}
         />
       </div>
-      <div>{title}</div>
+
+      {type === "current" ? (
+        <TextOverlay
+          title={
+            title.length >= 28 ? title.substring(0, 25).concat("...") : title
+          }
+          className="top-[35%] bottom-[35%] left-[12%] w-[75%] flex items-center justify-center"
+        />
+      ) : (
+        <TextOverlay
+          title={title}
+          className="top-[15%] bottom-[15%] right-[18%] w-[25%] text-right"
+        />
+      )}
+    </div>
+  );
+}
+
+function TextOverlay({
+  title,
+  className = "",
+}: {
+  title: string;
+  className?: string;
+}) {
+  return (
+    <div
+      className={`absolute text-ellipsis overflow-hidden text-2xl py-1 px-5 font-semibold bg-black bg-opacity-50 rounded-[15px]  ${className}`}
+    >
+      {title}
     </div>
   );
 }
diff --git a/next/components/projects/Timeline.tsx b/next/components/projects/Timeline.tsx
@@ -6,11 +6,33 @@ type TimelineProps = {
   type: "current" | "old";
 };
 
+// const firstDay = new Date(new Date().getFullYear(), 0, 1);
+
 const Timeline = ({ timelineElements, type }: TimelineProps) => {
   return (
     <div className="flex flex-col pl-[10%] pt-[5%] pb-[5%]">
       <div className="h-4 w-4 ml-4 sm:ml-10 md:ml-0 bg-white rounded-full"></div>
       <div>
+
+      {/* {timelineElements.map((timelineElement, index) => {
+          const date = new Date(timelineElement.Date);
+          const type = date >= firstDay ? "current" : "old";
+
+          return (
+            <div className="flex items-center gap-20">
+              <DateBlob
+                timelineElement={timelineElement}
+                isEven={index % 2 == 0}
+                type={type}
+              />
+              <ImageComponent
+                src={getLargestImageUrl(timelineElement.image)}
+                title={timelineElement.title}
+                type={type}
+              />
+            </div>
+          );
+        })} */}
         {timelineElements.map((timelineElement, index) => (
           <ProjectsComponent
             key={timelineElement.slug}