625 add team to about (#742)

* Added Committee & life members to about page

* codegen

* codegen

* removed commented code

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

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
+  ]
 }

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>

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}

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"
+    })
+  ]
+}

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
+}

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()
+    })
+  ]
+}

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
+}