From e1a27c60f926982709ea4dd250d732b903c7e267 Mon Sep 17 00:00:00 2001
From: AzizP786 <60585478+AzizPatel786@users.noreply.github.com>
Date: Mon, 5 Aug 2024 19:47:52 +1200
Subject: [PATCH] 625 add team to about (#742)

* Added Committee & life members to about page

* codegen

* codegen

* removed commented code
---
 client/sanity.config.ts                       |  4 +-
 client/sanity/schema.ts                       | 11 ++++-
 client/src/app/about/page.tsx                 | 44 +++++++++++++++++++
 .../generic/ExecImage/ExecImage.tsx           |  2 +-
 .../models/sanity/CommitteeMembers/Schema.ts  | 32 ++++++++++++++
 .../models/sanity/CommitteeMembers/Utils.ts   | 10 +++++
 .../src/models/sanity/LifeMembers/Schema.ts   | 15 +++++++
 client/src/models/sanity/LifeMembers/Utils.ts |  7 +++
 8 files changed, 122 insertions(+), 3 deletions(-)
 create mode 100644 client/src/models/sanity/CommitteeMembers/Schema.ts
 create mode 100644 client/src/models/sanity/CommitteeMembers/Utils.ts
 create mode 100644 client/src/models/sanity/LifeMembers/Schema.ts
 create mode 100644 client/src/models/sanity/LifeMembers/Utils.ts

diff --git a/client/sanity.config.ts b/client/sanity.config.ts
index 631c0d572..fd136e7f3 100644
--- a/client/sanity.config.ts
+++ b/client/sanity.config.ts
@@ -53,7 +53,9 @@ export default defineConfig({
 
             // Regular document types
             S.documentTypeListItem("about-item").title("About Item"),
-            S.documentTypeListItem("contact-detail").title("Contact Detail")
+            S.documentTypeListItem("contact-detail").title("Contact Detail"),
+            S.documentTypeListItem("life-member").title("Life Member"),
+            S.documentTypeListItem("committee-member").title("Committee Member")
           ])
     }),
     // Vision is a tool that lets you query your content with GROQ in the studio
diff --git a/client/sanity/schema.ts b/client/sanity/schema.ts
index 860a5b027..3773d5d3e 100644
--- a/client/sanity/schema.ts
+++ b/client/sanity/schema.ts
@@ -3,7 +3,16 @@ import { ContactDetailSchema } from "@/models/sanity/ContactDetail/Schema"
 import { HomePageSchema } from "@/models/sanity/HomePage/Schema"
 import { LodgeInfoSchema } from "@/models/sanity/LodgeInfo/Schema"
 import { type SchemaTypeDefinition } from "sanity"
+import { CommitteeMemberSchema } from "@/models/sanity/CommitteeMembers/Schema"
+import { LifeMemberSchema } from "@/models/sanity/LifeMembers/Schema"
 
 export const schema: { types: SchemaTypeDefinition[] } = {
-  types: [AboutItemSchema, HomePageSchema, ContactDetailSchema, LodgeInfoSchema]
+  types: [
+    AboutItemSchema,
+    HomePageSchema,
+    ContactDetailSchema,
+    LodgeInfoSchema,
+    CommitteeMemberSchema,
+    LifeMemberSchema
+  ]
 }
diff --git a/client/src/app/about/page.tsx b/client/src/app/about/page.tsx
index 35f0aa8d7..3406056de 100644
--- a/client/src/app/about/page.tsx
+++ b/client/src/app/about/page.tsx
@@ -7,6 +7,15 @@ import {
   AboutItem
 } from "@/models/sanity/AboutItem/Utils"
 import { sanityQuery } from "../../../sanity/lib/utils"
+import {
+  COMMITTEE_MEMBERS_GROQ_QUERY,
+  CommitteeMembers
+} from "@/models/sanity/CommitteeMembers/Utils"
+import {
+  LIFE_MEMBERS_GROQ_QUERY,
+  LifeMembers
+} from "@/models/sanity/LifeMembers/Utils"
+import ExecImage from "@/components/generic/ExecImage/ExecImage"
 
 export const metadata: Metadata = {
   title: "About UASC",
@@ -15,6 +24,10 @@ export const metadata: Metadata = {
 
 const About = async () => {
   const aboutItems = await sanityQuery<AboutItem[]>(ABOUT_ITEMS_GROQ_QUERY)
+  const committeeMembers = await sanityQuery<CommitteeMembers[]>(
+    COMMITTEE_MEMBERS_GROQ_QUERY
+  )
+  const lifeMembers = await sanityQuery<LifeMembers[]>(LIFE_MEMBERS_GROQ_QUERY)
 
   return (
     <>
@@ -43,6 +56,37 @@ const About = async () => {
               </div>
             )
           })}
+          <h2 className="text-dark-blue-100 my-8 text-center italic">
+            Committee Members
+          </h2>
+          <div className="mx-auto flex w-[80%] flex-wrap  justify-center gap-4">
+            {committeeMembers.map((member) => (
+              <div
+                key={member._id}
+                className="flex-shrink-1 group relative mb-4 flex w-1/3 items-center justify-center overflow-hidden px-2 sm:w-1/4 md:w-1/5 lg:w-1/6"
+              >
+                <ExecImage
+                  src={member.imageUrl || ""}
+                  alt={member.name || ""}
+                  title={member.title || ""}
+                  name={member.name || ""}
+                />
+              </div>
+            ))}
+          </div>
+          <h2 className="text-dark-blue-100 my-8 text-center italic">
+            Life Members
+          </h2>
+          <div className="mx-auto flex w-[80%] flex-wrap justify-center gap-4">
+            {lifeMembers.map((member) => (
+              <div
+                key={member._id}
+                className="group relative mb-4 flex w-[150px] flex-shrink-0 items-center  justify-center overflow-hidden px-2 sm:w-1/2 md:w-1/3 lg:w-1/5"
+              >
+                <p className="text-black">{member.name}</p>
+              </div>
+            ))}
+          </div>
         </div>
         <Footer />
       </div>
diff --git a/client/src/components/generic/ExecImage/ExecImage.tsx b/client/src/components/generic/ExecImage/ExecImage.tsx
index f62b97a57..5004101bb 100644
--- a/client/src/components/generic/ExecImage/ExecImage.tsx
+++ b/client/src/components/generic/ExecImage/ExecImage.tsx
@@ -10,7 +10,7 @@ export interface ExecImageProps {
 
 const ExecImage: React.FC<ExecImageProps> = ({ src, alt, title, name }) => {
   return (
-    <div className="group relative flex h-[163px] w-[163px] flex-shrink-0 overflow-hidden rounded-[4px]">
+    <div className="aspect-w-{1} aspect-h-{1} group relative flex w-[100%] flex-shrink-0 overflow-hidden rounded-[4px]">
       <Image
         src={src}
         alt={alt}
diff --git a/client/src/models/sanity/CommitteeMembers/Schema.ts b/client/src/models/sanity/CommitteeMembers/Schema.ts
new file mode 100644
index 000000000..0a7b18659
--- /dev/null
+++ b/client/src/models/sanity/CommitteeMembers/Schema.ts
@@ -0,0 +1,32 @@
+import { SchemaTypeDefinition, defineField } from "sanity"
+
+export const CommitteeMemberSchema: SchemaTypeDefinition = {
+  name: "committee-member",
+  title: "Committee Member",
+  type: "document",
+  fields: [
+    defineField({
+      name: "name",
+      title: "Name",
+      type: "string",
+      validation: (Rule) => Rule.required()
+    }),
+    defineField({
+      name: "title",
+      title: "Title",
+      type: "string",
+      validation: (Rule) => Rule.required()
+    }),
+    defineField({
+      name: "alt",
+      title: "Alt",
+      type: "string",
+      validation: (Rule) => Rule.required()
+    }),
+    defineField({
+      name: "image",
+      title: "Image",
+      type: "image"
+    })
+  ]
+}
diff --git a/client/src/models/sanity/CommitteeMembers/Utils.ts b/client/src/models/sanity/CommitteeMembers/Utils.ts
new file mode 100644
index 000000000..fc2a4c405
--- /dev/null
+++ b/client/src/models/sanity/CommitteeMembers/Utils.ts
@@ -0,0 +1,10 @@
+export const COMMITTEE_MEMBERS_GROQ_QUERY =
+  `*[_type == "committee-member"]{"imageUrl": image.asset->url, ...} | order(_createdAt asc)` as const
+
+export type CommitteeMembers = {
+  _id: string
+  name?: string
+  title?: string
+  alt?: string
+  imageUrl?: string
+}
diff --git a/client/src/models/sanity/LifeMembers/Schema.ts b/client/src/models/sanity/LifeMembers/Schema.ts
new file mode 100644
index 000000000..08bce90f0
--- /dev/null
+++ b/client/src/models/sanity/LifeMembers/Schema.ts
@@ -0,0 +1,15 @@
+import { defineField, SchemaTypeDefinition } from "sanity"
+
+export const LifeMemberSchema: SchemaTypeDefinition = {
+  name: "life-member",
+  title: "Life Member",
+  type: "document",
+  fields: [
+    defineField({
+      name: "name",
+      title: "Name",
+      type: "string",
+      validation: (Rule) => Rule.required()
+    })
+  ]
+}
diff --git a/client/src/models/sanity/LifeMembers/Utils.ts b/client/src/models/sanity/LifeMembers/Utils.ts
new file mode 100644
index 000000000..37a8fbadf
--- /dev/null
+++ b/client/src/models/sanity/LifeMembers/Utils.ts
@@ -0,0 +1,7 @@
+export const LIFE_MEMBERS_GROQ_QUERY =
+  `*[_type == "life-member"] | order(_createdAt asc)` as const
+
+export type LifeMembers = {
+  _id: string
+  name?: string
+}