110 lines
3.7 KiB
TypeScript
110 lines
3.7 KiB
TypeScript
import { ParsedUrlQuery } from "querystring";
|
|
|
|
import { GetStaticProps } from "next";
|
|
import React from "react";
|
|
|
|
import { ConnectWithUs } from "@/components/ConnectWithUs";
|
|
import { DefaultLayout } from "@/components/DefaultLayout";
|
|
import { EmailSignup } from "@/components/EmailSignup";
|
|
import { EventDescriptionCard } from "@/components/EventDescriptionCard";
|
|
import { Image } from "@/components/Image";
|
|
import { NewsCard } from "@/components/NewsCard";
|
|
import { SocialLinks } from "@/components/SocialLinks";
|
|
import { Event, getUpcomingEvents } from "@/lib/events";
|
|
|
|
import UnavailableContent, {
|
|
metadata as unavailableMetadata,
|
|
} from "../content/playground/unavailable.news.mdx";
|
|
|
|
import styles from "./index.module.css";
|
|
|
|
interface Props {
|
|
events: Event[];
|
|
}
|
|
|
|
export default function Home(props: Props) {
|
|
return (
|
|
<>
|
|
<DefaultLayout>
|
|
<header className={styles.intro}>
|
|
<div className={styles.introTop} />
|
|
<div className={styles.introContent}>
|
|
<div className={styles.clubTitleWrapper}>
|
|
<Image src="/images/logo-icon.svg" alt="CSC Logo" />
|
|
<h1 className={styles.clubTitle}>Computer Science Club</h1>
|
|
</div>
|
|
<p className={styles.clubDescription}>
|
|
University of Waterloo's <br />
|
|
student computing community
|
|
</p>
|
|
<SocialLinks color="gradient" size="big" />
|
|
</div>
|
|
<div className={styles.introBottom} />
|
|
<Image
|
|
className={styles.codey}
|
|
src="/images/home/codey_sitting.svg"
|
|
alt="CSC mascot Codey, a blue shiba with circular glasses"
|
|
/>
|
|
</header>
|
|
</DefaultLayout>
|
|
<div className={styles.cardsBackground}>
|
|
<div className={styles.cards}>
|
|
{/* TODO: add links to past/upcoming events and past news */}
|
|
<section className={styles.events}>
|
|
<h1 className={styles.cardsHeading}>Upcoming Events</h1>
|
|
<p className={styles.cardsDescription}>See past events here</p>
|
|
<hr className={styles.cardsDividingLine} />
|
|
<div className={styles.eventCards}>
|
|
{props.events.length > 0 ? (
|
|
props.events
|
|
.slice(0, 2)
|
|
.map((event) => (
|
|
<EventDescriptionCard
|
|
{...event.metadata}
|
|
date={new Date(event.metadata.date)}
|
|
key={event.metadata.name + event.metadata.date.toString()}
|
|
/>
|
|
))
|
|
) : (
|
|
<p>
|
|
There are no upcoming events right now. Please check back
|
|
later!
|
|
</p>
|
|
)}
|
|
{props.events.length > 2 ? (
|
|
<p>See more upcoming events here</p>
|
|
) : null}
|
|
</div>
|
|
</section>
|
|
<section className={styles.news}>
|
|
<h1 className={styles.cardsHeading}>News</h1>
|
|
<p className={styles.cardsDescription}>
|
|
Updates from our execs! <br />
|
|
See past news here
|
|
</p>
|
|
<hr className={styles.cardsDividingLine} />
|
|
<NewsCard {...unavailableMetadata}>
|
|
<UnavailableContent />
|
|
</NewsCard>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
<DefaultLayout>
|
|
<ConnectWithUs />
|
|
<EmailSignup />
|
|
</DefaultLayout>
|
|
</>
|
|
);
|
|
}
|
|
|
|
Home.Layout = function HomeLayout(props: { children: React.ReactNode }) {
|
|
return <div className={styles.page}>{props.children}</div>;
|
|
};
|
|
|
|
type Params = ParsedUrlQuery;
|
|
|
|
export const getStaticProps: GetStaticProps<Props, Params> = async () => {
|
|
const events = await getUpcomingEvents();
|
|
return { props: { events } };
|
|
};
|