Unify officer cards.

components/OfficerCard.js

@@ -0,0 +1,85 @@
+import Image from 'next/image';
+import React from 'react';
+
+import styles from '../styles/components/OfficerCard.module.scss';
+
+function Officer({
+  name,
+  pronouns,
+  position,
+  /* eslint-disable-next-line no-unused-vars */
+  committee, // no officer card formats use committee yet
+  major,
+  year,
+  img,
+  alt,
+  bio,
+  size,
+  style,
+}) {
+  if (style && style.toLowerCase() === 'jedi') {
+    return (
+      <div className={styles['mb-2']}>
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img className={styles['jedi-profile-img']} src={img} alt={alt} />
+        <div className={styles['jedi-card-body']}>
+          <h2 className={styles['jedi-title']}>
+            {name} <span className={styles['pronouns-jedi']}>{pronouns}</span>
+          </h2>
+          <p className={styles['my-tight']}>{bio}</p>
+        </div>
+      </div>
+    );
+  } else if (size && size.toLowerCase() === 'compact') {
+    return (
+      <div className={styles['officer-grid-row']}>
+        <div className={styles['officer-grid-col']}>
+          <Image
+            className={styles['officer-image']}
+            src={img}
+            alt={alt}
+            width={70}
+            height={70}
+          />
+        </div>
+        <div className={`${styles['officer-grid-col']} ${styles['officer-info']}`}>
+          <h3 className={styles['officer-title']}>{name}</h3>
+          <p>{position}</p>
+        </div>
+      </div>
+    );
+  } else {
+    return (
+      <div
+        className={`${styles['officer-card']} ${styles['grid-tablet-only-2']}`}
+      >
+        <div className={styles['officer-image-container']}>
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img src={img} alt={alt} style={{ maxWidth: '100%' }} />
+        </div>
+        <div>
+          <h3 className={styles.name}>{name}</h3>
+          <h4 className={styles.pronouns}>{pronouns}</h4>
+          <ul className="list-unstyled">
+            <li>{position}</li>
+            <li>{major}</li>
+            <li>Class of {year}</li>
+          </ul>
+        </div>
+      </div>
+    );
+  }
+}
+
+function Officers(props) {
+  return (
+    // TODO: more flexible mobile views
+    <>
+      {props.officers.map((officer) => (
+        <Officer {...officer} size={props.size} style={props.style} key={props.officers.name} />
+      ))}
+    </>
+  );
+}
+
+export default Officers;

data/index.js

@@ -2,6 +2,7 @@ import Board from './board';
 import Carousel from './carousel';
 import Committees from './committees';
 import Internship from './internship';
+import Leadership from './leadership';
 import News from './news';
 import Officers from './officers';
 import Sponsors from './sponsors';
@@ -11,6 +12,7 @@ export default {
 	committees: Committees,
 	carousel: Carousel,
 	sponsors: Sponsors,
+	leadership: Leadership,
 	officers: Officers,
 	news: News,
 	tgprojects: TGProjects,

data/jedi.js

@@ -128,35 +128,35 @@ const jedis = [
     name: 'helia woo',
     pronouns: 'she/her',
     bio: 'sometimes stressed, sometimes depressed, always happy to hold out a hand :-)',
-    pic: 'https://teachla.uclaacm.com/img/team/hwoo.png',
+    img: 'https://teachla.uclaacm.com/img/team/hwoo.png',
     alt: 'Helia in a park!',
   },
   {
     name: 'alyssa wang',
     pronouns: 'she/her',
     bio: 'never stressed sometimes depressed',
-    pic: 'https://teachla.uclaacm.com/img/team/awang.jpg',
+    img: 'https://teachla.uclaacm.com/img/team/awang.jpg',
     alt: 'a photo of Alyssa smiling',
   },
   {
     name: 'jiin',
     pronouns: 'she/her',
     bio: 'sometimes stressed never depressed',
-    pic: 'https://teachla.uclaacm.com/img/team/jiinkim.png',
+    img: 'https://teachla.uclaacm.com/img/team/jiinkim.png',
     alt: 'Jiin smiling in her room',
   },
   {
     name: 'christine kim',
     pronouns: 'she/they',
     bio: 'open 24/7 to keep learning about equity, talk about how we could be doing better, and argue over how much better breath of the wild is than genshin impact!',
-    pic: 'https://teachla.uclaacm.com/img/team/christinekim.jpg',
+    img: 'https://teachla.uclaacm.com/img/team/christinekim.jpg',
     alt: 'Alyssa smiling in front of a courtyard',
   },
   {
     name: 'stephen',
     pronouns: 'he/him',
     bio: 'ask me about how many different shapes I can make out of orange peels',
-    pic: 'https://teachla.uclaacm.com/img/team/skelman.jpg',
+    img: 'https://teachla.uclaacm.com/img/team/skelman.jpg',
     alt: 'stephen smiling!',
   },
 ];

data/leadership.js

@@ -0,0 +1,72 @@
+export default [
+	{
+		name: 'Matthew Wang',
+		position: 'President',
+		img: '/images/officers/MattWang.jpg',
+	},
+	{
+		name: 'Tina Huang',
+		position: 'External Vice President',
+		img: '/images/officers/TinaHuang.jpg',
+	},
+	{
+		name: 'Evan Zhong',
+		position: 'Internal Vice President',
+		img: '/images/officers/EvanZhong.jpg',
+	},
+	{
+		name: 'Asha Kar',
+		position: 'Co-President, Hack',
+		img: '/images/officers/AshaKar.jpg',
+	},
+	{
+		name: 'Eugene Lo',
+		position: 'Co-President, Hack',
+		img: '/images/officers/EugeneLo.jpg',
+	},
+	{
+		name: 'Cindy Zhang',
+		position: 'President, ACM-W',
+		img: '/images/officers/CindyZhang.jpg',
+	},
+	{
+		name: 'Justin Yi',
+		position: 'President, AI',
+		img: '/images/officers/JustinYi.jpg',
+	},
+	{
+		name: 'Christian Loanzon',
+		position: 'Co-President, Game Studio',
+		img: '/images/officers/ChristianLoanzon.jpg',
+	},
+	{
+		name: 'Peter Sutarjo',
+		position: 'Co-President, Game Studio',
+		img: '/images/officers/PeterSutarjo.jpg',
+	},
+	{
+		name: 'Jacob Zhang',
+		position: 'President, ICPC',
+		img: '/images/officers/JacobZhang.jpeg',
+	},
+	{
+		name: 'Henry Chang',
+		position: 'Co-President, Cyber',
+		img: '/images/officers/HenryChang.jpg',
+	},
+	{
+		name: 'Joshua Lee',
+		position: 'Co-President, Cyber',
+		img: '/images/officers/JoshLee.jpg',
+	},
+	{
+		name: 'Sophie Schoenmeyer',
+		position: 'President, Teach LA',
+		img: '/images/officers/SophieSchoenmeyer.jpg',
+	},
+	{
+		name: 'Crystal Huynh',
+		position: 'President, Design',
+		img: '/images/officers/CrystalHuynh.jpg',
+	},
+];

data/officers.js

@@ -1,72 +1,13 @@
 export default [
-	{
-		name: 'Matthew Wang',
-		title: 'President',
-		image: '/images/officers/MattWang.jpg',
-	},
-	{
-		name: 'Tina Huang',
-		title: 'External Vice President',
-		image: '/images/officers/TinaHuang.jpg',
-	},
-	{
-		name: 'Evan Zhong',
-		title: 'Internal Vice President',
-		image: '/images/officers/EvanZhong.jpg',
-	},
-	{
-		name: 'Asha Kar',
-		title: 'Co-President, Hack',
-		image: '/images/officers/AshaKar.jpg',
-	},
-	{
-		name: 'Eugene Lo',
-		title: 'Co-President, Hack',
-		image: '/images/officers/EugeneLo.jpg',
-	},
-	{
-		name: 'Cindy Zhang',
-		title: 'President, ACM-W',
-		image: '/images/officers/CindyZhang.jpg',
-	},
-	{
-		name: 'Justin Yi',
-		title: 'President, AI',
-		image: '/images/officers/JustinYi.jpg',
-	},
-	{
-		name: 'Christian Loanzon',
-		title: 'Co-President, Game Studio',
-		image: '/images/officers/ChristianLoanzon.jpg',
-	},
-	{
-		name: 'Peter Sutarjo',
-		title: 'Co-President, Game Studio',
-		image: '/images/officers/PeterSutarjo.jpg',
-	},
-	{
-		name: 'Jacob Zhang',
-		title: 'President, ICPC',
-		image: '/images/officers/JacobZhang.jpeg',
-	},
-	{
-		name: 'Henry Chang',
-		title: 'Co-President, Cyber',
-		image: '/images/officers/HenryChang.jpg',
-	},
-	{
-		name: 'Joshua Lee',
-		title: 'Co-President, Cyber',
-		image: '/images/officers/JoshLee.jpg',
-	},
-	{
-		name: 'Sophie Schoenmeyer',
-		title: 'President, Teach LA',
-		image: '/images/officers/SophieSchoenmeyer.jpg',
-	},
-	{
-		name: 'Crystal Huynh',
-		title: 'President, Design',
-		image: '/images/officers/CrystalHuynh.jpg',
-	},
+    {
+        name: 'Dylon Tjanaka',
+        pronouns: 'he/him',
+        position: 'Dev Team Officer',
+        committee: 'Board',
+        major: 'Computer Science Major',
+        year: 2022,
+		img: '/images/officers/DylonTjanaka.jpg',
+		alt: 'Dylon standing in front of the Great Wall of China',
+        bio: 'When not chasing squirrels, Dylon enjoys running, chasing cyclists, and long walks.',
+    },
 ];