feat: ✨ add new scholars section support

AI-READI · Dec 3, 2024 · 38de600 · 38de600
1 parent b4c6d61
commit 38de600
Show file tree

Hide file tree

Showing 2 changed files with 142 additions and 100 deletions.
diff --git a/public/data/scholars.json b/public/data/scholars.json
@@ -1,6 +1,7 @@
 [
   {
     "id": "Hadi-Khazaei",
+    "class": "2023-2024",
     "name": "Hadi Khazaei",
     "image": "https://ucarecdn.com/503173c5-1eb1-42bc-9005-c390fa8340bf/-/crop/face/200px160p/-/quality/smart_retina/-/format/auto/-/progressive/yes/",
     "moduleImageParams": "",
@@ -23,6 +24,7 @@
   },
   {
     "id": "Kyongmi-Simpkins",
+    "class": "2023-2024",
     "name": "Kyongmi Simpkins",
     "image": "https://ucarecdn.com/57e1acbd-2e97-41d4-bf70-d2355f1a9f8a/-/quality/smart_retina/-/format/auto/-/progressive/yes/",
     "moduleImageParams": "-/crop/face/190px150p/",
@@ -42,6 +44,7 @@
   },
   {
     "id": "Anna-Heinke",
+    "class": "2023-2024",
     "name": "Anna Heinke",
     "image": "https://ucarecdn.com/45f1eb9a-b6f2-4b5e-9618-18189285af62/-/quality/smart_retina/-/format/auto/-/progressive/yes/",
     "moduleImageParams": "-/crop/face/200px160p/",
@@ -72,6 +75,7 @@
   },
   {
     "id": "Nada-Haboudal",
+    "class": "2023-2024",
     "name": "Nada Haboudal",
     "image": "https://ucarecdn.com/12c60787-2733-4802-b96e-0a43bfa907c2/-/quality/smart_retina/-/format/auto/-/progressive/yes/",
     "moduleImageParams": "-/crop/face/200px150p/",
@@ -101,6 +105,7 @@
   },
   {
     "id": "Shahin-Hallaj",
+    "class": "2023-2024",
     "name": "Shahin Hallaj",
     "image": "https://ucarecdn.com/a7686be0-dfda-4d71-91e3-e27812fccc00/-/quality/smart_retina/-/format/auto/-/progressive/yes/",
     "moduleImageParams": "",
@@ -129,6 +134,7 @@
   },
   {
     "id": "Fritz-Gerald-Kalaw",
+    "class": "2023-2024",
     "name": "Fritz Gerald Kalaw",
     "image": "https://ucarecdn.com/a711ef59-e368-4d0c-bb8e-ea2d6244322e/-/quality/smart_retina/-/format/auto/-/progressive/yes/",
     "moduleImageParams": "",
@@ -163,6 +169,7 @@
   },
   {
     "id": "Apoorva-Karsolia",
+    "class": "2023-2024",
     "name": "Apoorva Karsolia",
     "image": "https://ucarecdn.com/5f77b9d1-d9c5-4a7f-b62c-992a6a1e25e3/-/quality/smart_retina/-/format/auto/-/progressive/yes/",
     "moduleImageParams": "-/crop/face/200px170p/",

diff --git a/src/pages/scholars.tsx b/src/pages/scholars.tsx
@@ -50,9 +50,114 @@ interface Scholar {
   social: { linkedin?: string; resume?: string; medprofile?: string };
 }
 
+const ScholarsGrid: React.FC<{
+  scholars: Scholar[];
+  openModal: (scholarId: string) => void;
+}> = ({ scholars, openModal }) => {
+  return (
+    <motion.div
+      variants={FramerContainer}
+      initial='hidden'
+      whileInView='show'
+      viewport={{ once: true }}
+      className='mx-auto grid max-w-screen-xl gap-8 px-4 pb-8 pt-4 text-center sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 lg:gap-8 lg:px-6 lg:pb-16 lg:pt-8'
+    >
+      {scholars.map((scholar) => (
+        <motion.div
+          // variants={FadeFramerItem}
+          key={scholar.id + Math.random()}
+          id={scholar.id}
+        >
+          <div
+            className='flex h-full flex-col items-center justify-between rounded-lg border-solid bg-slate-50 px-4 py-4 transition-all'
+            key={scholar.name}
+          >
+            {scholar.tag.length > 0 ? (
+              <Wrap>
+                {scholar.tag.map((tag) => (
+                  <WrapItem key={tag}>
+                    <Badge
+                      className='mb-2'
+                      colorScheme={tag === '#OpenToWork' ? 'teal' : 'cyan'}
+                      fontSize='0.7em'
+                      variant='outline'
+                    >
+                      {tag}
+                    </Badge>
+                  </WrapItem>
+                ))}
+              </Wrap>
+            ) : (
+              <div className='mb-2 h-[18px]'></div>
+            )}
+
+            <div className='relative mx-auto mb-2 min-h-[350px] w-full sm:min-h-[250px]'>
+              <Image
+                src={`${scholar.image}${
+                  scholar.moduleImageParams != ''
+                    ? scholar.moduleImageParams
+                    : ''
+                }`}
+                alt={scholar.name + ' image'}
+                fill
+                placeholder='blur'
+                blurDataURL={scholar.blurDataURL}
+                className='h-full w-full rounded-lg object-cover object-center'
+                sizes='(max-width: 768px) 100vw, 50vw'
+              />
+            </div>
+
+            <h3 className='pb-1 text-2xl font-extrabold text-slate-800'>
+              {scholar.name}
+            </h3>
+
+            <Grid templateColumns='repeat(10, 1fr)'>
+              <GridItem>
+                <IoSchoolSharp size={20} />
+              </GridItem>
+
+              <GridItem colSpan={9}>
+                <p className='mb-2 ml-2 text-left font-semibold text-slate-600'>
+                  {scholar.education[0].degree}
+                </p>
+              </GridItem>
+
+              <GridItem>
+                <RiAwardFill size={20} />
+              </GridItem>
+
+              <GridItem colSpan={9}>
+                <Wrap>
+                  {scholar.expertise.map((expertise, index) => (
+                    <WrapItem key={index}>
+                      <Tag colorScheme='blue' size='sm'>
+                        {expertise}
+                      </Tag>
+                    </WrapItem>
+                  ))}
+                </Wrap>
+              </GridItem>
+            </Grid>
+
+            <Button
+              size='sm'
+              colorScheme='teal'
+              className='mt-5 place-content-end'
+              rightIcon={<BsPlusCircleDotted />}
+              onClick={() => openModal(scholar.id)}
+            >
+              Expand
+            </Button>
+          </div>
+        </motion.div>
+      ))}
+    </motion.div>
+  );
+};
+
 const ScholarsPage: React.FC<
   InferGetStaticPropsType<typeof getStaticProps>
-> = ({ AllScholars }) => {
+> = ({ AllScholars, Class23_24Scholars, Class24_25Scholars }) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const [selectedScholar, setSelectedScholar] = useState<Scholar | null>(null);
 
@@ -86,105 +191,25 @@ const ScholarsPage: React.FC<
             primaryButton='Learn more about the study'
           />
 
-          <motion.div
-            variants={FramerContainer}
-            initial='hidden'
-            whileInView='show'
-            viewport={{ once: true }}
-            className='mx-auto grid max-w-screen-xl gap-8 px-4 py-8 text-center sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 lg:gap-8 lg:px-6 lg:py-16'
-          >
-            {AllScholars.map((scholar) => (
-              <motion.div
-                // variants={FadeFramerItem}
-                key={scholar.id + Math.random()}
-                id={scholar.id}
-              >
-                <div
-                  className='flex h-full flex-col items-center justify-between rounded-lg border-solid bg-slate-50 px-4 py-4 transition-all'
-                  key={scholar.name}
-                >
-                  {scholar.tag.length > 0 ? (
-                    <Wrap>
-                      {scholar.tag.map((tag) => (
-                        <WrapItem key={tag}>
-                          <Badge
-                            className='mb-2'
-                            colorScheme={
-                              tag === '#OpenToWork' ? 'teal' : 'cyan'
-                            }
-                            fontSize='0.7em'
-                            variant='outline'
-                          >
-                            {tag}
-                          </Badge>
-                        </WrapItem>
-                      ))}
-                    </Wrap>
-                  ) : (
-                    <div className='mb-2 h-[18px]'></div>
-                  )}
-
-                  <div className='relative mx-auto mb-2 min-h-[350px] w-full sm:min-h-[250px]'>
-                    <Image
-                      src={`${scholar.image}${
-                        scholar.moduleImageParams != ''
-                          ? scholar.moduleImageParams
-                          : ''
-                      }`}
-                      alt={scholar.name + ' image'}
-                      fill
-                      placeholder='blur'
-                      blurDataURL={scholar.blurDataURL}
-                      className='h-full w-full rounded-lg object-cover object-center'
-                      sizes='(max-width: 768px) 100vw, 50vw'
-                    />
-                  </div>
-
-                  <h3 className='pb-1 text-2xl font-extrabold text-slate-800'>
-                    {scholar.name}
-                  </h3>
-
-                  <Grid templateColumns='repeat(10, 1fr)'>
-                    <GridItem>
-                      <IoSchoolSharp size={20} />
-                    </GridItem>
-
-                    <GridItem colSpan={9}>
-                      <p className='mb-2 ml-2 text-left font-semibold text-slate-600'>
-                        {scholar.education[0].degree}
-                      </p>
-                    </GridItem>
-
-                    <GridItem>
-                      <RiAwardFill size={20} />
-                    </GridItem>
-
-                    <GridItem colSpan={9}>
-                      <Wrap>
-                        {scholar.expertise.map((expertise, index) => (
-                          <WrapItem key={index}>
-                            <Tag colorScheme='blue' size='sm'>
-                              {expertise}
-                            </Tag>
-                          </WrapItem>
-                        ))}
-                      </Wrap>
-                    </GridItem>
-                  </Grid>
-
-                  <Button
-                    size='sm'
-                    colorScheme='teal'
-                    className='mt-5 place-content-end'
-                    rightIcon={<BsPlusCircleDotted />}
-                    onClick={() => openModal(scholar.id)}
-                  >
-                    Expand
-                  </Button>
-                </div>
-              </motion.div>
-            ))}
-          </motion.div>
+          <h2 className='pt-8 text-center text-3xl font-extrabold tracking-tight sm:text-4xl lg:pt-16'>
+            Current Class (2024-2025)
+          </h2>
+
+          <h3 className='pt-1 text-center text-xl font-bold text-slate-700 sm:text-2xl lg:pt-4'>
+            Coming soon...
+          </h3>
+
+          <ScholarsGrid scholars={Class24_25Scholars} openModal={openModal} />
+
+          <h2 className='pt-3 text-center text-3xl font-extrabold tracking-tight sm:text-4xl'>
+            Alumni
+          </h2>
+
+          <h3 className='pt-1 text-center text-xl font-bold text-slate-700 sm:text-2xl lg:pt-4'>
+            Class of 2023-2024
+          </h3>
+
+          <ScholarsGrid scholars={Class23_24Scholars} openModal={openModal} />
 
           <Modal isOpen={isOpen} onClose={onClose} isCentered size='3xl'>
             <ModalOverlay />
@@ -357,9 +382,19 @@ export const getStaticProps = async () => {
     return 0;
   });
 
+  const Class23_24Scholars = AllScholars.filter(
+    (scholar) => scholar.class === '2023-2024',
+  );
+
+  const Class24_25Scholars = AllScholars.filter(
+    (scholar) => scholar.class === '2024-2025',
+  );
+
   return {
     props: {
       AllScholars,
+      Class23_24Scholars,
+      Class24_25Scholars,
     },
   };
 };