styling + add placeholders
This commit is contained in:
parent
5d0de1ff03
commit
29773d79ba
|
@ -1,7 +1,7 @@
|
|||
[
|
||||
{
|
||||
"name": "",
|
||||
"role": "",
|
||||
"image": ""
|
||||
"name": "Name Name",
|
||||
"role": "Role",
|
||||
"image": "images/playground/doge.jpg"
|
||||
}
|
||||
]
|
|
@ -1,21 +1,20 @@
|
|||
.container {
|
||||
margin: 0 auto;
|
||||
max-width: calc(806rem / 16);
|
||||
padding: 0 calc(60rem / 16);
|
||||
}
|
||||
|
||||
.headerContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-bottom: calc(24rem / 16);
|
||||
border-bottom: calc(1rem / 16) solid var(--purple-2);
|
||||
margin-bottom: calc(46rem / 16);
|
||||
}
|
||||
|
||||
.headerTextContainer {
|
||||
margin: auto 0 0 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
color: var(--purple-2);
|
||||
font-size: calc(48rem / 16);
|
||||
margin: 0 1rem 0 0;
|
||||
text-align: center;
|
||||
float: left;
|
||||
margin: 0 calc(53rem / 16) 0 0;
|
||||
}
|
||||
|
||||
.subheading {
|
||||
|
@ -27,6 +26,32 @@
|
|||
margin-bottom: calc(46rem / 16);
|
||||
}
|
||||
|
||||
.codey {
|
||||
width: calc(360rem / 16);
|
||||
}
|
||||
|
||||
.execs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(26rem / 16);
|
||||
margin-bottom: calc(86rem / 16);
|
||||
}
|
||||
|
||||
.members {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(calc(100rem / 16), 1fr));
|
||||
row-gap: calc(43rem / 16);
|
||||
column-gap: calc(53rem / 16);
|
||||
}
|
||||
|
||||
.members:last-child {
|
||||
margin-bottom: calc(86rem / 16);
|
||||
}
|
||||
|
||||
.elections {
|
||||
margin-top: 6rem;
|
||||
}
|
||||
|
||||
.electionSubheading {
|
||||
color: var(--blue-2);
|
||||
font-size: calc(36rem / 16);
|
||||
|
@ -35,10 +60,5 @@
|
|||
|
||||
.elections > p {
|
||||
margin: 0;
|
||||
line-height: calc(30rem / 16);
|
||||
}
|
||||
|
||||
.codey {
|
||||
width: calc(260rem / 16);
|
||||
/* 360 makes text appear on 2 lines */
|
||||
line-height: 1.875;
|
||||
}
|
||||
|
|
|
@ -2,31 +2,34 @@ import React, { ReactNode } from "react";
|
|||
import { MDXProvider } from "@mdx-js/react";
|
||||
import { Image } from "../../components/Image";
|
||||
import ElectionContent from "../../content/meet-the-team/elections.mdx";
|
||||
import styles from "./team.module.css";
|
||||
import { TeamMemberCard } from "../../components/TeamMemberCard";
|
||||
// import fs from "fs";
|
||||
import { InferGetStaticPropsType } from "next";
|
||||
import dynamic from "next/dynamic";
|
||||
|
||||
const execsPath = "content/meet-the-team/execs/";
|
||||
|
||||
export default function MeetTheTeam(
|
||||
props: InferGetStaticPropsType<typeof getStaticProps>
|
||||
) {
|
||||
const components = props.files.map((file) =>
|
||||
dynamic(() => import("../../" + execsPath + file))
|
||||
);
|
||||
import { TeamMember } from "../../components/TeamMember";
|
||||
import styles from "./team.module.css";
|
||||
import programme from "../../content/meet-the-team/programme-committee.json";
|
||||
import website from "../../content/meet-the-team/website-committee.json";
|
||||
import systems from "../../content/meet-the-team/systems-committee.json";
|
||||
import other from "../../content/meet-the-team/other.json";
|
||||
import KallenTu, {
|
||||
metadata as KallenMetadata,
|
||||
} from "../../content/meet-the-team/execs/Kallen-Tu.team-member.mdx";
|
||||
|
||||
export default function MeetTheTeam() {
|
||||
return (
|
||||
<MDXProvider components={{}}>
|
||||
<div className={styles.container}>
|
||||
<>
|
||||
<div className={styles.headerContainer}>
|
||||
<h1 className={styles.header}>Meet the Team!</h1>
|
||||
<div className={styles.headerTextContainer}>
|
||||
<h1 className={styles.header}>Meet the Team!</h1>
|
||||
<h2
|
||||
className={styles.subheading}
|
||||
style={{ borderBottom: "none", margin: 0, padding: 0 }}
|
||||
>
|
||||
The Executives
|
||||
</h2>
|
||||
</div>
|
||||
<Image src="meet-the-team/team-codey.svg" className={styles.codey} />
|
||||
</div>
|
||||
<div className={styles.execs}>
|
||||
<h2 className={styles.subheading}>The Executives</h2>
|
||||
{console.log(components)}
|
||||
{/* {props.execs.map((exec) => {
|
||||
return (
|
||||
<div key={exec.metadata.name}>
|
||||
|
@ -36,43 +39,84 @@ export default function MeetTheTeam(
|
|||
</div>
|
||||
);
|
||||
})} */}
|
||||
<TeamMemberCard {...KallenMetadata}>
|
||||
<KallenTu />
|
||||
</TeamMemberCard>
|
||||
<TeamMemberCard {...KallenMetadata}>
|
||||
<KallenTu />
|
||||
</TeamMemberCard>
|
||||
<TeamMemberCard {...KallenMetadata}>
|
||||
<KallenTu />
|
||||
</TeamMemberCard>
|
||||
</div>
|
||||
<div className={styles.programme}>
|
||||
<h2 className={styles.subheading}>Programme Committee</h2>
|
||||
<MembersList team={programme} />
|
||||
</div>
|
||||
<div className={styles.website}>
|
||||
<h2 className={styles.subheading}>Website Committee</h2>
|
||||
<MembersList team={website} />
|
||||
</div>
|
||||
<div className={styles.system}>
|
||||
<h2 className={styles.subheading}>Systems Committee</h2>
|
||||
<MembersList team={systems} />
|
||||
</div>
|
||||
<div className={styles.other}>
|
||||
<h2 className={styles.subheading}>Other Positions</h2>
|
||||
<MembersList team={other} />
|
||||
</div>
|
||||
<div className={styles.elections}>
|
||||
<h2 className={styles.electionSubheading}>Elections</h2>
|
||||
<ElectionContent />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</MDXProvider>
|
||||
);
|
||||
}
|
||||
|
||||
interface ExecProps {
|
||||
content: ReactNode;
|
||||
metadata: { name: string; role: string; image?: string };
|
||||
interface MembersProps {
|
||||
team: Array<Metadata>;
|
||||
}
|
||||
|
||||
export async function getStaticProps() {
|
||||
// const execs: ExecProps[] = [];
|
||||
const fs = require("fs");
|
||||
const files = fs.readdirSync(execsPath);
|
||||
console.log(files);
|
||||
// files.map(async (file: string) => {
|
||||
// // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
||||
// const exec = await import("../../" + execsPath + file);
|
||||
// exec.content = <exec.default />;
|
||||
// execs.push(exec);
|
||||
// });
|
||||
return { props: { files } };
|
||||
interface Metadata {
|
||||
name: string;
|
||||
role: string;
|
||||
image?: string;
|
||||
}
|
||||
|
||||
function MembersList(props: MembersProps) {
|
||||
return (
|
||||
<div className={styles.members}>
|
||||
{props.team.map((member) => (
|
||||
<TeamMember {...member} key={member.name} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// -- Dynamic Import logic --
|
||||
|
||||
// import { readdirSync } from "fs";
|
||||
// import { InferGetStaticPropsType } from "next";
|
||||
// import dynamic from "next/dynamic";
|
||||
|
||||
// const files = readdirSync("content/meet-the-team/execs/")
|
||||
|
||||
// const components = files.map((file) =>
|
||||
// dynamic(() => import("../../" + execsPath + file))
|
||||
// );
|
||||
|
||||
// props: InferGetStaticPropsType<typeof getStaticProps>
|
||||
|
||||
// export async function getStaticProps() {
|
||||
// // const execs: ExecProps[] = [];
|
||||
// const files = readdirSync(execsPath);
|
||||
// console.log(files);
|
||||
// // files.map(async (file: string) => {
|
||||
// // // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
||||
// // const exec = await import("../../" + execsPath + file);
|
||||
// // exec.content = <exec.default />;
|
||||
// // execs.push(exec);
|
||||
// // });
|
||||
// return { props: { files } };
|
||||
// }
|
||||
|
|
Loading…
Reference in New Issue