Create sorting
This commit is contained in:
parent
f12ffbb925
commit
339b527fcc
|
@ -1,26 +1,26 @@
|
|||
import React from "react";
|
||||
|
||||
import { Metadata } from "@/lib/team";
|
||||
|
||||
import { Image } from "./Image";
|
||||
|
||||
import styles from "./TeamMember.module.css";
|
||||
|
||||
interface TeamMemberProps {
|
||||
name: string;
|
||||
role: string;
|
||||
image: string;
|
||||
}
|
||||
|
||||
export const TeamMember: React.FC<TeamMemberProps> = ({
|
||||
name,
|
||||
role,
|
||||
image,
|
||||
}) => {
|
||||
export const TeamMember: React.FC<Metadata> = (metadata: Metadata) => {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<Image className={styles.img} src={image} alt={`Picture of ${name}`} />
|
||||
<Image
|
||||
className={styles.img}
|
||||
src={metadata.image}
|
||||
alt={`Picture of ${metadata.name}`}
|
||||
/>
|
||||
<div className={styles.caption}>
|
||||
<div className={styles.name}>{name}</div>
|
||||
<div className={styles.role}>{role}</div>
|
||||
<div className={styles.name}>{metadata.name}</div>
|
||||
<div className={styles.role}>
|
||||
{Object.prototype.hasOwnProperty.call(metadata, "role")
|
||||
? metadata.role
|
||||
: ""}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -1,22 +1,26 @@
|
|||
[
|
||||
{
|
||||
"name": "David Chen",
|
||||
"name": "Eric Liu",
|
||||
"role": "Team Lead"
|
||||
},
|
||||
{
|
||||
"name": "Daniel Kim",
|
||||
"role": "External Affairs"
|
||||
"name": "Ernest Wong",
|
||||
"role": ""
|
||||
},
|
||||
{
|
||||
"name": "Eric Liu",
|
||||
"role": "External Affairs"
|
||||
"name": "Jason D'Souza",
|
||||
"role": ""
|
||||
},
|
||||
{
|
||||
"name": "Victor Wu",
|
||||
"role": "External Affairs"
|
||||
"name": "Oren Leung",
|
||||
"role": ""
|
||||
},
|
||||
{
|
||||
"name": "Wanda Song",
|
||||
"role": "External Affairs"
|
||||
"name": "Sameer Fettes",
|
||||
"role": ""
|
||||
},
|
||||
{
|
||||
"name": "David Chen",
|
||||
"role": "Advisor"
|
||||
}
|
||||
]
|
||||
]
|
||||
|
|
|
@ -1,31 +1,26 @@
|
|||
[
|
||||
{
|
||||
"name": "Dina Orucevic",
|
||||
"name": "Haley Song",
|
||||
"role": "Team Lead"
|
||||
},
|
||||
{
|
||||
"name": "Amy Lai"
|
||||
},
|
||||
{
|
||||
"name": "Kshama Patel"
|
||||
},
|
||||
{
|
||||
"name": "Dina Orucevic",
|
||||
"role": "Advisor"
|
||||
},
|
||||
{
|
||||
"name": "Arjun Amit Athalye",
|
||||
"role": "Marketing",
|
||||
"image": "/images/team/ArjunAthalye.jpeg"
|
||||
},
|
||||
{
|
||||
"name": "Catherine Tao",
|
||||
"role": "Marketing"
|
||||
"name": "Joyce Ye"
|
||||
},
|
||||
{
|
||||
"name": "Ethan Hong",
|
||||
"role": "Marketing"
|
||||
},
|
||||
{
|
||||
"name": "Gurnika Kaur",
|
||||
"role": "Marketing"
|
||||
},
|
||||
{
|
||||
"name": "Haley Song",
|
||||
"role": "Marketing"
|
||||
},
|
||||
{
|
||||
"name": "Kshama Patel",
|
||||
"role": "Marketing"
|
||||
"name": "Rasta Ranjbar"
|
||||
}
|
||||
]
|
||||
]
|
||||
|
|
|
@ -30,7 +30,7 @@ const orderedExecPositions: string[] = [
|
|||
|
||||
export interface Metadata {
|
||||
name: string;
|
||||
role: string;
|
||||
role?: string;
|
||||
image: string;
|
||||
}
|
||||
|
||||
|
|
|
@ -146,7 +146,7 @@ export default function Team({
|
|||
{execs.map((exec) => {
|
||||
return (
|
||||
<div key={exec.metadata.name}>
|
||||
<TeamMemberCard {...exec.metadata}>
|
||||
<TeamMemberCard role="" {...exec.metadata}>
|
||||
<MDXRemote {...exec.content} />
|
||||
</TeamMemberCard>
|
||||
</div>
|
||||
|
@ -207,6 +207,25 @@ async function getTeamWithImages(team: TeamMember[]) {
|
|||
);
|
||||
}
|
||||
|
||||
function sortTeam(team: Metadata[]): Metadata[] {
|
||||
const teamLeads: Metadata[] = [];
|
||||
const teamMembers: Metadata[] = [];
|
||||
const teamOthers: Metadata[] = [];
|
||||
for (const member of team) {
|
||||
if (!Object.prototype.hasOwnProperty.call(member, "role")) {
|
||||
teamMembers.push(member);
|
||||
} else if (member.role === "Team Lead") {
|
||||
teamLeads.push(member);
|
||||
} else {
|
||||
teamOthers.push(member);
|
||||
}
|
||||
}
|
||||
teamLeads.sort((a, b) => a.name.localeCompare(b.name));
|
||||
teamMembers.sort((a, b) => a.name.localeCompare(b.name));
|
||||
teamOthers.sort((a, b) => a.name.localeCompare(b.name));
|
||||
return [...teamLeads, ...teamMembers, ...teamOthers];
|
||||
}
|
||||
|
||||
export const getStaticProps: GetStaticProps<Props> = async () => {
|
||||
const execNamePosPairs = await getExecNamePosPairs();
|
||||
|
||||
|
@ -216,7 +235,7 @@ export const getStaticProps: GetStaticProps<Props> = async () => {
|
|||
)
|
||||
)) as SerializedExec[];
|
||||
|
||||
const [
|
||||
let [
|
||||
design,
|
||||
discord,
|
||||
events,
|
||||
|
@ -240,6 +259,17 @@ export const getStaticProps: GetStaticProps<Props> = async () => {
|
|||
getTeamWithImages(terminalData),
|
||||
]);
|
||||
|
||||
design = sortTeam(design);
|
||||
discord = sortTeam(discord);
|
||||
events = sortTeam(events);
|
||||
external = sortTeam(external);
|
||||
marketing = sortTeam(marketing);
|
||||
photography = sortTeam(photography);
|
||||
reps = sortTeam(reps);
|
||||
website = sortTeam(website);
|
||||
systems = sortTeam(systems);
|
||||
terminal = sortTeam(terminal);
|
||||
|
||||
return {
|
||||
props: {
|
||||
execs,
|
||||
|
|
Loading…
Reference in New Issue