www-new/pages/index.tsx

import React from "react";
import { Image } from "../components/Image";
import { SocialLinks } from "../components/SocialLinks";
import { EventDescriptionCard } from "../components/EventDescriptionCard";
import { NewsCard } from "../components/NewsCard";
import styles from "./index.module.css";

// temporary event and news imports
import OOTBReact, {
  metadata as OOTBReactEventMetadata,
} from "../content/playground/ootb-react.event.mdx";
import AltTab, {
  metadata as altTabEventMetadata,
} from "../content/playground/alt-tab.event.mdx";
import UnavailableContent, {
  metadata as unavailableMetadata,
} from "../content/playground/unavailable.news.mdx";

export default function Home() {
  const events = [
    { Content: OOTBReact, metadata: OOTBReactEventMetadata },
    { Content: AltTab, metadata: altTabEventMetadata },
  ];

  return (
    <>
      <main className={styles.intro}>
        <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&apos;s student computing community
        </p>
        <SocialLinks color="gradient" size="big" />
        <Image
          className={styles.codey}
          src="/images/home/codey_sitting.svg"
          alt="CSC mascot Codey, a blue shiba with circular glasses"
        />
      </main>
      <div className={styles.cardsBackground}>
        <div className={styles.cards}>
          {/* TODO: add links to past events and past news */}
          <section className={styles.events}>
            <h2 className={styles.cardsHeading}>Upcoming Events</h2>
            <p className={styles.cardsDescription}>See past events here</p>
            <div className={styles.eventCards}>
              {events.map(({ metadata }) => (
                <EventDescriptionCard
                  {...metadata}
                  key={metadata.name + metadata.date.toString()}
                />
              ))}
            </div>
          </section>
          <section className={styles.news}>
            <h2 className={styles.cardsHeading}>News</h2>
            <p className={styles.cardsDescription}>
              Updates from our execs! See past news here
            </p>
            <NewsCard {...unavailableMetadata}>
              <UnavailableContent />
            </NewsCard>
          </section>
        </div>
      </div>
      <div className={styles.contact}>
        {/* TODO: use <ConnectWithUs> and <EmailSighup> components */}
      </div>
    </>
  );
}

Home.Layout = function HomeLayout(props: { children: React.ReactNode }) {
  return props.children;
};