From b6912094168e1baba31f662f1d82b851a984b574 Mon Sep 17 00:00:00 2001
From: Duosi-Dai <duosi@kth.se>
Date: Sun, 11 Aug 2024 18:35:48 +0200
Subject: [PATCH] fix formatting

---
 .../about/_components/OrganizationList.tsx    | 92 +++++++++----------
 src/app/about/_components/PersonCard.tsx      | 88 +++++++++---------
 src/app/about/team/page.tsx                   | 27 +++---
 3 files changed, 103 insertions(+), 104 deletions(-)

diff --git a/src/app/about/_components/OrganizationList.tsx b/src/app/about/_components/OrganizationList.tsx
index 5689734..610de88 100644
--- a/src/app/about/_components/OrganizationList.tsx
+++ b/src/app/about/_components/OrganizationList.tsx
@@ -6,55 +6,55 @@ import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"
 import { useState } from "react"
 
 const OrganizationList = ({ group }: { group: Organization }) => {
-	const [showOTs, setShowOTs] = useState(false)
+  const [showOTs, setShowOTs] = useState(false)
 
-	const handleButtonClick = () => {
-		setShowOTs(prevState => !prevState)
-	}
+  const handleButtonClick = () => {
+    setShowOTs(prevState => !prevState)
+  }
 
-	const projectGroup = group.people.filter(
-		person =>
-			person.role.toLowerCase().includes("project group") ||
-			person.role.toLowerCase().includes("project manager")
-	)
-	const operationTeam = group.people.filter(person =>
-		person.role.toLowerCase().includes("operation team")
-	)
+  const projectGroup = group.people.filter(
+    person =>
+      person.role.toLowerCase().includes("project group") ||
+      person.role.toLowerCase().includes("project manager")
+  )
+  const operationTeam = group.people.filter(person =>
+    person.role.toLowerCase().includes("operation team")
+  )
 
-	return (
-		<div key={group.name} className="mt-16">
-			<h2 className="font-bebas-neue text-3xl">{group.name}</h2>
-			<div className="mt-5 flex flex-wrap items-start justify-center gap-6 md:justify-start">
-				{projectGroup.map(person => (
-					<PersonCard key={person.id} person={person} />
-				))}
-				{showOTs &&
-					operationTeam.map(person => (
-						<PersonCard key={person.id} person={person} />
-					))}
-				<div className="my-20 flex justify-center">
-					{group.name === "Project Manager" ? null : (
-						<Button
-							variant={"secondary"}
-							className="dark:bg-liqorice-700"
-							onClick={handleButtonClick}>
-							{showOTs ? (
-								<>
-									<ArrowLeftIcon className="mr-4 h-4 w-4" />
-									See Less Members
-								</>
-							) : (
-								<>
-									See More Members
-									<ArrowRightIcon className="ml-4 h-4 w-4" />
-								</>
-							)}
-						</Button>
-					)}
-				</div>
-			</div>
-		</div>
-	)
+  return (
+    <div key={group.name} className="mt-16">
+      <h2 className="font-bebas-neue text-3xl">{group.name}</h2>
+      <div className="mt-5 flex flex-wrap items-start justify-center gap-6 md:justify-start">
+        {projectGroup.map(person => (
+          <PersonCard key={person.id} person={person} />
+        ))}
+        {showOTs &&
+          operationTeam.map(person => (
+            <PersonCard key={person.id} person={person} />
+          ))}
+        <div className="my-20 flex justify-center">
+          {group.name === "Project Manager" ? null : (
+            <Button
+              variant={"secondary"}
+              className="dark:bg-liqorice-700"
+              onClick={handleButtonClick}>
+              {showOTs ? (
+                <>
+                  <ArrowLeftIcon className="mr-4 h-4 w-4" />
+                  See Less Members
+                </>
+              ) : (
+                <>
+                  See More Members
+                  <ArrowRightIcon className="ml-4 h-4 w-4" />
+                </>
+              )}
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
 }
 
 export default OrganizationList
diff --git a/src/app/about/_components/PersonCard.tsx b/src/app/about/_components/PersonCard.tsx
index 7ff2e4e..bc9cf93 100644
--- a/src/app/about/_components/PersonCard.tsx
+++ b/src/app/about/_components/PersonCard.tsx
@@ -5,49 +5,49 @@ import Image from "next/image"
 import Link from "next/link"
 
 const PersonCard = ({ person }: { person: Person }) => {
-	return (
-		<>
-			<div key={person.id} className="w-52">
-				{person.picture == null || person.picture.includes("no-image") ? (
-					<div className="flex aspect-square w-52 flex-1 items-center justify-center">
-						<PersonIcon className="m-auto h-20 w-20 text-melon-700" />
-					</div>
-				) : (
-					<div className="overflow-hidden rounded-lg">
-						<Image
-							loading="lazy"
-							src={person.picture}
-							alt={person.name}
-							width={200}
-							height={200}
-							className="aspect-square w-full object-cover transition-all duration-200 hover:scale-105"
-							style={{
-								maxWidth: "100%",
-								height: "auto"
-							}}
-						/>
-					</div>
-				)}
-				<div className="mt-2">
-					<p className="text-melon-700">{person.name}</p>
-					<p className="mt-1 text-sm text-stone-400">
-						{person.role.split("–")[1]}
-					</p>
-					<div className="mt-2 flex gap-x-2">
-						{person.email != null && (
-							<Link href={`mailto:${person.email}`}>
-								<MailIcon className="mr-2 inline-block aspect-square w-5" />
-							</Link>
-						)}
-						{person.linkedin_url != null && (
-							<Link href={person.linkedin_url}>
-								<LinkedinIcon className="inline-block aspect-square w-5" />
-							</Link>
-						)}
-					</div>
-				</div>
-			</div>
-		</>
-	)
+  return (
+    <>
+      <div key={person.id} className="w-52">
+        {person.picture == null || person.picture.includes("no-image") ? (
+          <div className="flex aspect-square w-52 flex-1 items-center justify-center">
+            <PersonIcon className="m-auto h-20 w-20 text-melon-700" />
+          </div>
+        ) : (
+          <div className="overflow-hidden rounded-lg">
+            <Image
+              loading="lazy"
+              src={person.picture}
+              alt={person.name}
+              width={200}
+              height={200}
+              className="aspect-square w-full object-cover transition-all duration-200 hover:scale-105"
+              style={{
+                maxWidth: "100%",
+                height: "auto"
+              }}
+            />
+          </div>
+        )}
+        <div className="mt-2">
+          <p className="text-melon-700">{person.name}</p>
+          <p className="mt-1 text-sm text-stone-400">
+            {person.role.split("–")[1]}
+          </p>
+          <div className="mt-2 flex gap-x-2">
+            {person.email != null && (
+              <Link href={`mailto:${person.email}`}>
+                <MailIcon className="mr-2 inline-block aspect-square w-5" />
+              </Link>
+            )}
+            {person.linkedin_url != null && (
+              <Link href={person.linkedin_url}>
+                <LinkedinIcon className="inline-block aspect-square w-5" />
+              </Link>
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  )
 }
 export default PersonCard
diff --git a/src/app/about/team/page.tsx b/src/app/about/team/page.tsx
index 74a5d71..a567f6e 100644
--- a/src/app/about/team/page.tsx
+++ b/src/app/about/team/page.tsx
@@ -14,19 +14,18 @@ export default async function TeamPage() {
       revalidate: 3600 * 24 * 6 // 6 days (S3 caches the images for 7 days exactly, we want to revalidate before that, otherwise the images will not be loaded)
     }
   })
-  
-	return (
-		<Page.Background withIndents className="justify-start">
-			<Page.Boundary>
-				<Page.Header>Meet the team</Page.Header>
-				<div className="">
-					{organization.map(group => (
-						<OrganizationList key={group.name} group={group} />
-					))}
-				</div>
-			</Page.Boundary>
-			<div className="h-20" />
-		</Page.Background>
-	)
 
+  return (
+    <Page.Background withIndents className="justify-start">
+      <Page.Boundary>
+        <Page.Header>Meet the team</Page.Header>
+        <div className="">
+          {organization.map(group => (
+            <OrganizationList key={group.name} group={group} />
+          ))}
+        </div>
+      </Page.Boundary>
+      <div className="h-20" />
+    </Page.Background>
+  )
 }