Merge pull request #128 from UoaWDCC/108_projects-page

108 Projects Page

next/app/projects/active/page.tsx

@@ -0,0 +1,18 @@
+import Project from "@/components/projects/Project";
+import { projectSchema } from "@/schemas/collection/Project";
+import fetchStrapi from "@/util/strapi";
+import { notFound } from "next/navigation";
+import { z } from "zod";
+
+export default async function CurrentProjectPage() {
+  const firstDay = new Date(new Date().getFullYear(), 0, 1);
+  const lastDay = new Date(new Date().getFullYear(), 11, 31);
+
+  const projects = await fetchStrapi("project-pages", z.array(projectSchema), {
+    "filters[Date][$gte]": firstDay.toISOString().split("T")[0],
+    "[$lte]": lastDay.toISOString().split("T")[0],
+  });
+
+  if (projects.length === 0) notFound();
+  return <Project type={"current"} projects={projects} />;
+}

next/app/projects/past/page.tsx

@@ -0,0 +1,16 @@
+import Project from "@/components/projects/Project";
+import { projectSchema } from "@/schemas/collection/Project";
+import fetchStrapi from "@/util/strapi";
+import { notFound } from "next/navigation";
+import { z } from "zod";
+
+export default async function CurrentProjectPage() {
+  const firstDay = new Date(new Date().getFullYear(), 0, 1);
+
+  const projects = await fetchStrapi("project-pages", z.array(projectSchema), {
+    "filters[Date][$lt]": firstDay.toISOString().split("T")[0],
+  });
+
+  if (projects.length === 0) notFound();
+  return <Project type={"old"} projects={projects} />;
+}

next/app/test/projects_timeline/page.tsx

@@ -1,20 +1,16 @@
-import DateBlob from "@/components/projects/DateBlob";
 import Timeline from "@/components/projects/Timeline";
+import { ProjectType } from "@/schemas/collection/Project";
 
-
-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") },
+const timelineElements: ProjectType[] = [
+  // { 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} />
-  );
+  return <Timeline timelineElements={timelineElements} />;
 }

next/components/header/header.tsx

@@ -20,16 +20,28 @@ async function getHeaderData() {
         .sort((a, b) => b.CommitteeYear - a.CommitteeYear) // Sort in descending order
     : []; // Default to an empty array if not an array
 
+  const projects = [
+    {
+      Title: new Date().getFullYear(),
+      slug: "current",
+    },
+    {
+      Title: "Past",
+      slug: "past",
+    },
+  ];
   return {
     ...resData,
     members,
+    projects,
   };
 }
 
 export default async function Header() {
   const data = await getHeaderData();
   const logoSrc = getLargestImageUrl(data.Logo);
   const links = data.navigation;
+  console.log(data);
 
   return (
     <header className={styles.header}>
@@ -54,8 +66,7 @@ export default async function Header() {
           >
             MEMBERS
           </Link>
-          <div
-            className="group-hover:flex hidden absolute top-full bg-white p-2 rounded-md items-center text-b-dark-blue flex-col py-1 px-2">
+          <div className="group-hover:flex hidden absolute top-full bg-white drop-shadow-xl p-2 rounded-md items-center text-b-dark-blue flex-col py-1 px-2">
             {/* align years vertically */}
             {/* Render sorted members */}
             {data.members.map(
@@ -72,6 +83,18 @@ export default async function Header() {
           </div>
         </div>
 
+        <div className="group relative">
+          <Link href="/projects/active">PROJECTS</Link>
+          <div className="group-hover:flex hidden absolute top-full bg-white p-2 drop-shadow-xl rounded-md items-center text-b-dark-blue flex-col py-1 px-2">
+            <Link href="/projects/active" className="my-1 min-w-16 text-center">
+              Active
+            </Link>
+            <Link href="/projects/past" className="my-1 min-w-16 text-center">
+              Past
+            </Link>
+          </div>
+        </div>
+
         {links.map((link) => (
           <Link href={link.slug} key={link.title}>
             {link.title.toLocaleUpperCase()}

next/components/projects/DateBlob.tsx

@@ -1,5 +1,5 @@
 type DateBlobProps = {
-  date: Date;
+  Date: Date;
 };
 
 const options = {
@@ -8,15 +8,22 @@ const options = {
   day: "numeric",
 };
 
-const DateBlob = ({timelineElement, isEven} : {timelineElement:DateBlobProps, isEven:boolean}) => {
-  return ( // change outer height element to allow for photo height etc
+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="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 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>
   );

next/components/projects/Project.tsx

@@ -0,0 +1,38 @@
+import { ProjectType } from "@/schemas/collection/Project";
+import BGBlob from "../svg/BGBlob";
+import Timeline from "./Timeline";
+
+export default function Project({
+  type,
+  projects,
+}: {
+  type: "current" | "old";
+  projects: ProjectType[];
+}) {
+  return (
+    <div className="h-full w-full">
+      <div className="absolute -z-10 top-[60%] w-1/6 -left-44">
+        <BGBlob />
+      </div>
+      <div className="mt-header">
+        <div className="flex flex-col items-center justify-center text-center w-full">
+          {type == "current" ? (
+            <p className="text-6xl font-bold leading-[0.95]">ACTIVE PROJECTS</p>
+          ) : (
+            <p className="text-6xl font-bold leading-[0.95]">PAST PROJECTS</p>
+          )}
+          <div className="max-w-4xl">
+            <p className="text-base p-10 text-wrap">
+              A group of young people eager to enact growing change in the
+              Devonport Takapuna comunity following in youth voices and youth
+              leadership.
+            </p>
+          </div>
+        </div>
+      </div>
+      <div>
+        <Timeline timelineElements={projects} />
+      </div>
+    </div>
+  );
+}

next/components/projects/ProjectsImage.tsx

@@ -1,6 +1,6 @@
 import Image from "next/image";
 
-export default function CurrentImageComponent({
+export default function ImageComponent({
   src,
   alt,
   title,

next/components/projects/Timeline.tsx

@@ -1,14 +1,30 @@
 import DateBlob from "@/components/projects/DateBlob";
+import { ProjectType } from "@/schemas/collection/Project";
+import { getLargestImageUrl } from "@/util/image";
+import ImageComponent from "./ProjectsImage";
 
-
-const Timeline = ({timelineElements} : { timelineElements: { date: Date }[] }) => {
+const Timeline = ({
+  timelineElements,
+}: {
+  timelineElements: ProjectType[];
+}) => {
   console.log(timelineElements);
   return (
-      <div className="flex flex-col mt-header pl-[10%] pt-[5%] pb-[5%]">
+    <div className="flex flex-col 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 className="flex items-center gap-20">
+            <DateBlob
+              timelineElement={timelineElement}
+              isEven={index % 2 == 0}
+            />
+            <ImageComponent
+              src={getLargestImageUrl(timelineElement.image)}
+              title={timelineElement.title}
+              type={"current"}
+            />
+          </div>
         ))}
       </div>
       <div className="h-4 w-4 bg-white rounded-full"></div>

next/components/svg/BGBlob.tsx

@@ -0,0 +1,34 @@
+export default function BGBlob() {
+  return (
+    // <div className="absolute top-3/4 -left-28 -z-10 w-80">
+    <svg
+      width="691"
+      height="685"
+      viewBox="0 0 691 685"
+      fill="none"
+      preserveAspectRatio="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="relative w-full h-full left-0 bottom-60"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M688.69 422.741C700.91 520.057 630.121 614.768 548.543 662.581C474.726 705.846 384.484 674.538 302.224 649.252C237.58 629.382 188.017 586.212 139.787 536.936C81.9466 477.841 -8.4448 424.134 0.859565 341.351C10.1537 258.659 119.65 245.46 178.782 189.984C245.227 127.647 273.339 -12.303 362.886 1.70646C453.158 15.8293 437.927 165.223 495.421 239.521C552.207 312.905 677.044 329.994 688.69 422.741Z"
+        fill="url(#paint0_linear_28_50)"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_28_50"
+          x1="152.99"
+          y1="542.874"
+          x2="427.952"
+          y2="44.3011"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#6EACC4" />
+          <stop offset="1" stop-color="#6EACC4" stop-opacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}

next/schemas/collection/Project.ts

@@ -1,12 +1,12 @@
 import { z } from "zod";
+import { imageSchema } from "../Image";
 
 export const projectSchema = z.object({
   slug: z.string(),
   title: z.string(),
-  Date: z.any(),
-  image: z.any(),
-  blocks: z.array(z.any()),
+  Date: z.coerce.date(),
+  image: imageSchema,
   Description: z.string(),
 });
 
-export type Project = z.infer<typeof projectSchema>;
+export type ProjectType = z.infer<typeof projectSchema>;

next/tailwind.config.js

@@ -21,6 +21,7 @@ module.exports = {
       },
       margin: {
         header: "8.5rem",
+        footer: "11.05rem",
       },
       padding: {
         header: "8.5rem",