www-new/components/playground.tsx

import React, { useState } from "react";

import AfterHoursContent, {
  metadata as afterHoursMetadata,
} from "../content/playground/after-hours.event.mdx";
import AltTab, {
  metadata as altTabEventMetadata,
} from "../content/playground/alt-tab.event.mdx";
import CodeyInfo, {
  metadata as codeyMetadata,
} from "../content/playground/codey.team-member.mdx";
import Duties, {
  metadata as dutiesOrganizedContentMetadata,
} from "../content/playground/constitution/duties-of-officers.section.mdx";
import ExecutiveCouncil, {
  metadata as executiveCouncilOrganizedContentMetadata,
} from "../content/playground/constitution/executive-council.section.mdx";
import Membership, {
  metadata as membershipOrganizedContentMetadata,
} from "../content/playground/constitution/membership.section.mdx";
import Name, {
  metadata as nameOrganizedContentMetadata,
} from "../content/playground/constitution/name.section.mdx";
import Officers, {
  metadata as officersOrganizedContentMetadata,
} from "../content/playground/constitution/officers.section.mdx";
import Purpose, {
  metadata as purposeOrganizedContentMetadata,
} from "../content/playground/constitution/purpose.section.mdx";
import { metadata as dogeMetadata } from "../content/playground/doge.team-member.mdx";
import OOTBReact, {
  metadata as OOTBReactEventMetadata,
} from "../content/playground/ootb-react.event.mdx";
import TempTechTalk, {
  metadata as tempTechTalkMetadata,
} from "../content/playground/temp.talk.mdx";
import UnavailableContent, {
  metadata as unavailableMetadata,
} from "../content/playground/unavailable.news.mdx";

import { Button } from "./Button";
import { EventCard } from "./EventCard";
import { EventDescriptionCard } from "./EventDescriptionCard";
import { Link } from "./Link";
import { MiniEventCard } from "./MiniEventCard";
import { MiniTechTalkCard } from "./MiniTechTalkCard";
import { NewsCard } from "./NewsCard";
import {
  OrganizedContent,
  LinkProps,
  createReadAllSection,
} from "./OrganizedContent";
import { TeamMember } from "./TeamMember";
import { TeamMemberCard } from "./TeamMemberCard";
import { TechTalkCard } from "./TechTalkCard";

import styles from "./playground.module.css";

const events = [
  { Content: OOTBReact, metadata: OOTBReactEventMetadata },
  { Content: AfterHoursContent, metadata: afterHoursMetadata },
  { Content: AltTab, metadata: altTabEventMetadata },
];

const constitution = [
  { Content: Name, ...nameOrganizedContentMetadata },
  { Content: Purpose, ...purposeOrganizedContentMetadata },
  { Content: Membership, ...membershipOrganizedContentMetadata },
  { Content: Officers, ...officersOrganizedContentMetadata },
  { Content: Duties, ...dutiesOrganizedContentMetadata },
  {
    Content: ExecutiveCouncil,
    ...executiveCouncilOrganizedContentMetadata,
  },
];

export function MiniEventCardDemo() {
  return (
    <div className={styles.miniEventCardDemo}>
      {events.map(({ Content, metadata }) => (
        <MiniEventCard
          {...metadata}
          description={<Content />}
          key={metadata.name + metadata.date.toString()}
        />
      ))}
    </div>
  );
}

export function NewsCardDemo() {
  return (
    <div className={styles.newsDemo}>
      <div className={styles.newsTitle}>News</div>
      <div className={styles.newsDesc}>
        Updates from our execs
        <br />
        <br />
      </div>
      <hr className={styles.newsHr} />
      <NewsCard {...unavailableMetadata}>
        <UnavailableContent />
      </NewsCard>
    </div>
  );
}

export function ButtonDemo() {
  return (
    <>
      <h3>Standard buttons</h3>
      <p>
        <Button isLink={true} href="/">
          Link
        </Button>
      </p>
      <p>
        <Button>Button</Button>
      </p>
      <h3>Small buttons</h3>
      <p>
        <Button isLink={true} href="/" size="small">
          Small Link
        </Button>
      </p>
      <p>
        <Button size="small">Small Button</Button>
      </p>
    </>
  );
}

export function EventDescriptionCardDemo() {
  return (
    <div className={styles.eventDescriptionCardDemo}>
      {events.map(({ metadata }) => (
        <EventDescriptionCard
          {...metadata}
          key={metadata.name + metadata.date.toString()}
        />
      ))}
    </div>
  );
}

export function EventCardDemo() {
  return (
    <>
      {events.map(({ Content, metadata }) => (
        <>
          <EventCard
            {...metadata}
            key={metadata.name + metadata.date.toDateString() + "1"}
            showDescription
          >
            <Content />
          </EventCard>
          <EventCard
            {...metadata}
            key={metadata.name + metadata.date.toDateString() + "2"}
            link="#"
          >
            <Content />
          </EventCard>
        </>
      ))}
    </>
  );
}

export function TeamMemberDemo() {
  return (
    <div className={styles.teamMemberDemo}>
      <div className={styles.teamMemberHeader}>
        <h1 className={styles.committee}>Programme Committee</h1>
      </div>
      <hr />
      <div className={styles.teamMembers}>
        <TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
        <TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
        <TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
        <TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
        <TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
        <TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
        <TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
        <TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
        <TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
        <TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
      </div>
    </div>
  );
}

export function TeamMemberCardDemo() {
  return (
    <div className={styles.teamMemberCardDemo}>
      <TeamMemberCard {...codeyMetadata} image="/images/playground/doge.jpg">
        <CodeyInfo />
      </TeamMemberCard>
    </div>
  );
}

export function LinkDemo() {
  return (
    <div className={styles.linkDemo}>
      <div className={styles.linkTitle}>Elections</div>
      <p>
        To find out when and where the next elections will be held, keep an eye
        on the <Link href="https://csclub.uwaterloo.ca/news/">News</Link>. For
        details on the elections, read our{" "}
        <Link href="https://csclub.uwaterloo.ca/about/constitution">
          Constitution
        </Link>
        .
      </p>
    </div>
  );
}

export function OrganizedContentDemo() {
  const sections = [...constitution];
  const numberedSections = false;
  const readAllSection = createReadAllSection(
    constitution.map(({ id, title, Content }) => ({
      Content,
      section: { id, title },
    })),
    true,
    numberedSections
  );
  sections.unshift({
    ...readAllSection.section,
    Content: readAllSection.Content,
  });

  const [id, setId] = useState(sections[0].id);

  function FakeLink({ className, id, children }: LinkProps) {
    return (
      <div className={className} onClick={() => setId(id)}>
        {children}
      </div>
    );
  }

  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  const Content = sections.find(
    ({ id: sectionId }) => sectionId === id
  )!.Content;

  return (
    <OrganizedContent
      sections={sections}
      id={id}
      link={FakeLink}
      pageTitle="Playground"
      numberedSections={numberedSections}
    >
      <Content />
    </OrganizedContent>
  );
}

export function TechTalkDemo() {
  const poster =
    tempTechTalkMetadata.thumbnails.large ??
    tempTechTalkMetadata.thumbnails.small;

  return (
    <div>
      <TechTalkCard {...tempTechTalkMetadata} poster={poster}>
        <TempTechTalk />
      </TechTalkCard>
    </div>
  );
}

export function MiniTechTalkDemo() {
  return (
    <div className={styles.miniTechTalkDemo}>
      <MiniTechTalkCard
        {...tempTechTalkMetadata}
        poster={tempTechTalkMetadata.thumbnails.small}
      />
      <MiniTechTalkCard
        {...tempTechTalkMetadata}
        poster={tempTechTalkMetadata.thumbnails.small}
      />
      <MiniTechTalkCard
        {...tempTechTalkMetadata}
        poster={tempTechTalkMetadata.thumbnails.small}
      />
    </div>
  );
}