Merge pull request #79 from armada-ths/duosi/fix/refactorTeamPage

Duosi/fix/refactor team page
armada-ths · Aug 11, 2024 · 59d2a30 · 59d2a30
2 parents 0ab65fc + b691209
commit 59d2a30
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 52 deletions.
diff --git a/src/app/about/_components/OrganizationList.tsx b/src/app/about/_components/OrganizationList.tsx
@@ -0,0 +1,60 @@
+"use client"
+import PersonCard from "@/app/about/_components/PersonCard"
+import { Organization } from "@/components/shared/hooks/api/useOrganization"
+import { Button } from "@/components/ui/button"
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"
+import { useState } from "react"
+
+const OrganizationList = ({ group }: { group: Organization }) => {
+  const [showOTs, setShowOTs] = useState(false)
+
+  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")
+  )
+
+  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
@@ -0,0 +1,53 @@
+import { Person } from "@/components/shared/hooks/api/useOrganization"
+import { PersonIcon } from "@radix-ui/react-icons"
+import { LinkedinIcon, MailIcon } from "lucide-react"
+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>
+    </>
+  )
+}
+export default PersonCard
diff --git a/src/app/about/team/page.tsx b/src/app/about/team/page.tsx
@@ -1,10 +1,7 @@
+import OrganizationList from "@/app/about/_components/OrganizationList"
 import { Page } from "@/components/shared/Page"
 import { fetchOrganization } from "@/components/shared/hooks/api/useOrganization"
-import { PersonIcon } from "@radix-ui/react-icons"
-import { LinkedinIcon, MailIcon } from "lucide-react"
 import { Metadata } from "next"
-import Image from "next/image"
-import Link from "next/link"
 
 export const metadata: Metadata = {
   title: `Armada Organization`,
@@ -24,54 +21,7 @@ export default async function TeamPage() {
         <Page.Header>Meet the team</Page.Header>
         <div className="">
           {organization.map(group => (
-            <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">
-                {group.people.map(person => (
-                  <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>
-                ))}
-              </div>
-            </div>
+            <OrganizationList key={group.name} group={group} />
           ))}
         </div>
       </Page.Boundary>