🧱 create Image type

next/app/about/page.tsx

@@ -3,7 +3,7 @@ import valueFlair1 from "@/assets/about/value1.png";
 import valueFlair2 from "@/assets/about/value2.png";
 import Header from "@/components/header/header";
 import { aboutPageSchema, TimelineElement } from "@/schemas/single/AboutPage";
-import { getLargestImage } from "@/util/image";
+import { getLargestImageUrl } from "@/util/image";
 import fetchStrapi from "@/util/strapi";
 import Image from "next/image";
 import styles from "./styles.module.css";
@@ -71,7 +71,7 @@ export default async function AboutPage() {
                   </time>
                   {isImage ? (
                     <img
-                      src={getLargestImage(e.Image)}
+                      src={getLargestImageUrl(e.Image)}
                       alt=""
                       className="w-full rounded-lg mb-4 shadow-xl"
                     />

next/app/members/[year]/page.tsx

@@ -4,68 +4,72 @@ import RichText from "@/components/blocks/RichText";
 import Footer from "@/components/footer/footer";
 import Header from "@/components/header/header";
 import { teamSchema } from "@/schemas/collection/Team";
-import { getLargestImage } from "@/util/image";
+import { getLargestImageUrl } from "@/util/image";
 import fetchStrapi from "@/util/strapi";
 import Image from "next/image";
 import { z } from "zod";
 import Chairman from "../../../components/members/Chairman";
 import Teams from "../../../components/members/Teams";
 
-export default async function MemberPage({ params }: { params: { year: string } }) {
-	const teams = await fetchStrapi("member-teams", z.array(teamSchema), {
-		"filters[CommitteeYear][$eq]": params.year,
-	});
-	const team = teams[0];
-	const chairs = team.Chairs;
-	const roleSections = team.RoleSection;
+export default async function MemberPage({
+  params,
+}: {
+  params: { year: string };
+}) {
+  const teams = await fetchStrapi("member-teams", z.array(teamSchema), {
+    "filters[CommitteeYear][$eq]": params.year,
+  });
+  const team = teams[0];
+  const chairs = team.Chairs;
+  const roleSections = team.RoleSection;
 
-	return (
-		<main className={`bg-gradient-1 isolate min-h-full`}>
-			{/* @ts-ignore */}
-			<Header />
-			<div className="flex flex-col items-center justify-center gap-6">
-				<h1 className="uppercase flex flex-col items-center mx-auto mt-12 mb-24">
-					<span className="text-6xl leading-[0.95]">Meet the</span>
-					<span className="text-8xl font-bold leading-[0.95]">
-						{team.CommitteeYear} Team
-					</span>
-				</h1>
+  return (
+    <main className={`bg-gradient-1 isolate min-h-full`}>
+      {/* @ts-ignore */}
+      <Header />
+      <div className="flex flex-col items-center justify-center gap-6">
+        <h1 className="uppercase flex flex-col items-center mx-auto mt-12 mb-24">
+          <span className="text-6xl leading-[0.95]">Meet the</span>
+          <span className="text-8xl font-bold leading-[0.95]">
+            {team.CommitteeYear} Team
+          </span>
+        </h1>
 
-				<div className="relative w-full grid place-items-center isolate">
-					<img
-						className="w-full max-w-5xl"
-						src={getLargestImage(team.teamPhoto)}
-						alt=""
-					/>
-					<div className="absolute bottom-8 right-12 p-8 pr-16 max-w-lg bg-white shadow-lg rounded-3xl text-b-dark-blue __markdown">
-						<RichText
-							props={{
-								text: team.description,
-							}}
-						/>
-						<a
-							className="block mr-auto w-fit bg-b-blue px-5 py-3 rounded-full font-bold mt-8"
-							href="#chairs"
-						>
-							MEET THE TEAM
-						</a>
-					</div>
-					<Image
-						className="absolute bottom-0 left-0"
-						src={ScribbleLeft}
-						alt=""
-					/>
-					<Image
-						className="absolute top-0 right-0 -translate-y-12 -z-10"
-						src={ScribbleRight}
-						alt=""
-					/>
-				</div>
-			</div>
-			{/* adjust minimum height of components */}
-			<Chairman chairs={chairs} />
-			<Teams teams={roleSections} />
-			<Footer />
-		</main>
-	);
+        <div className="relative w-full grid place-items-center isolate">
+          <img
+            className="w-full max-w-5xl"
+            src={getLargestImageUrl(team.teamPhoto)}
+            alt=""
+          />
+          <div className="absolute bottom-8 right-12 p-8 pr-16 max-w-lg bg-white shadow-lg rounded-3xl text-b-dark-blue __markdown">
+            <RichText
+              props={{
+                text: team.description,
+              }}
+            />
+            <a
+              className="block mr-auto w-fit bg-b-blue px-5 py-3 rounded-full font-bold mt-8"
+              href="#chairs"
+            >
+              MEET THE TEAM
+            </a>
+          </div>
+          <Image
+            className="absolute bottom-0 left-0"
+            src={ScribbleLeft}
+            alt=""
+          />
+          <Image
+            className="absolute top-0 right-0 -translate-y-12 -z-10"
+            src={ScribbleRight}
+            alt=""
+          />
+        </div>
+      </div>
+      {/* adjust minimum height of components */}
+      <Chairman chairs={chairs} />
+      <Teams teams={roleSections} />
+      <Footer />
+    </main>
+  );
 }

next/app/projects/page.tsx

@@ -2,7 +2,7 @@ import styles from "@/app/page.module.css";
 import Header from "@/components/header/header";
 import { projectSchema } from "@/schemas/collection/Project";
 import { projectsPageSchema } from "@/schemas/single/ProjectsPage";
-import { getLargestImage } from "@/util/image";
+import { getLargestImageUrl } from "@/util/image";
 import fetchStrapi from "@/util/strapi";
 import Link from "next/link";
 import { z } from "zod";
@@ -19,7 +19,7 @@ export default async function ProjectsPage() {
       </div>
       <section className="h-[85vh] flex flex-col items-center justify-center relative">
         <img
-          src={getLargestImage(projectsPage.BackgroundImage)}
+          src={getLargestImageUrl(projectsPage.BackgroundImage)}
           alt=""
           className="absolute inset-0 -z-10 object-cover w-full h-full brightness-50"
         />
@@ -35,7 +35,7 @@ export default async function ProjectsPage() {
             className="relative py-40 flex pl-16 pr-16 justify-between items-center"
           >
             <img
-              src={getLargestImage(p.image)}
+              src={getLargestImageUrl(p.image)}
               alt=""
               className="absolute inset-0 -z-10 w-full h-full object-cover brightness-50"
             />

next/components/blocks/ImageWithText.tsx

@@ -1,8 +1,8 @@
-import { getLargestImage } from "@/util/image";
+import { getLargestImageUrl } from "@/util/image";
 import styles from "./ImageWithText.module.css";
 
 export default function ImageWithText({ props }: { props: any }) {
-  const imageUrl = getLargestImage(props.image);
+  const imageUrl = getLargestImageUrl(props.image);
 
   return (
     <div className="grid grid-cols-2 max-h-[80vh]">

next/components/header/header.tsx

@@ -1,5 +1,5 @@
 import { headerSchema } from "@/schemas/single/Header";
-import { getLargestImage } from "@/util/image";
+import { getLargestImageUrl } from "@/util/image";
 import fetchStrapi from "@/util/strapi";
 import Image from "next/image";
 import Link from "next/link";
@@ -21,7 +21,7 @@ async function getHeaderData() {
 
 export default async function Header() {
   const data = await getHeaderData();
-  const logoSrc = getLargestImage(data.Logo);
+  const logoSrc = getLargestImageUrl(data.Logo);
   const links = data.navigation;
 
   return (

next/components/members/Chairman.tsx

@@ -1,7 +1,7 @@
 import Flair1 from "@/assets/members/flair1.png";
 import Flair2 from "@/assets/members/flair2.png";
 import { Member } from "@/schemas/collection/team/Member";
-import { getLargestImage } from "@/util/image";
+import { getLargestImageUrl } from "@/util/image";
 import Image from "next/image";
 
 const Chairman = ({ chairs }: { chairs: Member[] }) => {
@@ -35,7 +35,11 @@ const Chairman = ({ chairs }: { chairs: Member[] }) => {
             src={Flair2}
             alt=""
           />
-          <img className="w-full" src={getLargestImage(chair1.Photo)} alt="" />
+          <img
+            className="w-full"
+            src={getLargestImageUrl(chair1.Photo)}
+            alt=""
+          />
           <div className="bg-white px-8 py-6">
             <h3 className="text-2xl font-bold drop-shadow-md">{chair1.Name}</h3>
             <p className="text-black font-bold mb-3">{chair1.Role}</p>
@@ -48,7 +52,11 @@ const Chairman = ({ chairs }: { chairs: Member[] }) => {
             src={Flair1}
             alt=""
           />
-          <img className="w-full" src={getLargestImage(chair2.Photo)} alt="" />
+          <img
+            className="w-full"
+            src={getLargestImageUrl(chair2.Photo)}
+            alt=""
+          />
           <div className="bg-white px-8 py-6">
             <h3 className="text-2xl font-bold drop-shadow-md">{chair2.Name}</h3>
             <p className="text-black font-bold mb-3">{chair2.Role}</p>

next/components/members/Teams.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { Member, RoleSection } from "@/schemas/collection/Team";
-import { getLargestImage } from "@/util/image";
+import { getLargestImageUrl } from "@/util/image";
 import { motion } from "framer-motion";
 import { useState } from "react";
 import { IoClose } from "react-icons/io5";
@@ -47,7 +47,7 @@ export default function Teams({ teams }: { teams: RoleSection[] }) {
               onClick={() => setSelected(i)}
             >
               <img
-                src={getLargestImage(member.Photo)}
+                src={getLargestImageUrl(member.Photo)}
                 alt={member.Name}
                 className="w-full"
               />
@@ -96,7 +96,7 @@ function MemberModal({
       >
         <img
           className="max-h-[80vh] w-full object-cover"
-          src={getLargestImage(activeMember.Photo)}
+          src={getLargestImageUrl(activeMember.Photo)}
           alt=""
         />
         <div className="px-8 py-12 w-[65%]">

next/schemas/Image.ts

@@ -0,0 +1,45 @@
+import { z } from "zod";
+
+const imageFormatSchema = z.object({
+  name: z.string(),
+  hash: z.string(),
+  ext: z.string(),
+  mime: z.string(),
+  path: z.string().nullable(),
+  width: z.number(),
+  height: z.number(),
+  size: z.number(),
+  url: z.string(),
+});
+
+export type ImageFormat = z.infer<typeof imageFormatSchema>;
+
+export const imageSchema = z.object({
+  data: z.object({
+    attributes: z.object({
+      name: z.string(),
+      alternativeText: z.string().nullable(),
+      caption: z.string().nullable(),
+      width: z.number(),
+      height: z.number(),
+      formats: z.object({
+        large: imageFormatSchema.nullable(),
+        medium: imageFormatSchema.nullable(),
+        small: imageFormatSchema.nullable(),
+        thumbnail: imageFormatSchema.nullable(),
+      }),
+      hash: z.string(),
+      ext: z.string(),
+      mime: z.string(),
+      size: z.number(),
+      url: z.string(),
+      previewUrl: z.string().nullable(),
+      provider: z.string(),
+      provider_metadata: z.string().nullable(),
+      createdAt: z.string(),
+      updatedAt: z.string(),
+    }),
+  }),
+});
+
+export type ImageType = z.infer<typeof imageSchema>;

next/schemas/single/Header.ts

@@ -10,4 +10,4 @@ export const headerSchema = z.object({
   ),
 });
 
-export type Header = z.infer<typeof headerSchema>;
+export type HeaderType = z.infer<typeof headerSchema>;

next/util/image.ts

@@ -1,12 +1,16 @@
-export const getLargestImage = (img: any) => {
+import { ImageType } from "@/schemas/Image";
+
+export const getLargestImageUrl = (img: ImageType) => {
   try {
     const formats = img.data.attributes.formats;
 
-    const largestFormat =
-      formats.large || formats.medium || formats.small || formats.thumbnail;
+    const largestFormat = formats.large ??
+      formats.medium ??
+      formats.small ??
+      formats.thumbnail ?? { url: "" };
 
     return `${process.env.STRAPI_URL}${largestFormat.url}`;
   } catch {
-    return '';
+    return process.env.STRAPI_URL;
   }
 };