www-new/components/playground.tsx

import React, { useState } from "react";
import styles from "./playground.module.css";

import AfterHoursContent, {
  metadata as afterHoursMetadata,
} from "../content/playground/after-hours.event.mdx";
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";
import { metadata as dogeMetadata } from "../content/playground/doge.team-member.mdx";
import CodeyInfo, {
  metadata as codeyMetadata,
} from "../content/playground/codey.team-member.mdx";

import { MiniEventCard } from "./MiniEventCard";
import { NewsCard } from "./NewsCard";
import { EventCard } from "./EventCard";
import { EventDescriptionCard } from "./EventDescriptionCard";
import { TeamMember } from "./TeamMember";
import { TeamMemberCard } from "./TeamMemberCard";
import { OrganizedContent, LinkProps } from "./OrganizedContent";

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

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 EventDescriptionCardDemo() {
  return (
    <div className={styles.eventDescriptionCardDemo}>
      {events.map(({ metadata }) => (
        <EventDescriptionCard
          {...metadata}
          key={metadata.name + metadata.date.toString()}
        >
          {metadata.short}
        </EventDescriptionCard>
      ))}
    </div>
  );
}

export function EventCardDemo() {
  return (
    <>
      {events.map(({ Content, metadata }) => (
        <EventCard
          {...metadata}
          key={metadata.name + metadata.date.toDateString()}
        >
          <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} />
        <TeamMember {...dogeMetadata} />
        <TeamMember {...dogeMetadata} />
        <TeamMember {...dogeMetadata} />
        <TeamMember {...dogeMetadata} />
        <TeamMember {...dogeMetadata} />
        <TeamMember {...dogeMetadata} />
        <TeamMember {...dogeMetadata} />
        <TeamMember {...dogeMetadata} />
        <TeamMember {...dogeMetadata} />
      </div>
    </div>
  );
}

export function TeamMemberCardDemo() {
  return (
    <div className={styles.teamMemberCardDemo}>
      <TeamMemberCard {...codeyMetadata}>
        <CodeyInfo />
      </TeamMemberCard>
    </div>
  );
}

export function OrganizedContentDemo() {
  let sections = [
    {
      name: "1. Name",
      url: "a",
      content: (
        <div>
          {" "}
          1. The name of this organization shall be the &quot;Computer Science
          Club of the University of Waterloo&quot;.
        </div>
      ),
    },
    {
      name: "2. Purpose",
      url: "b",
      content: (
        <div>
          {" "}
          The Club is organized and will be operated exclusively for educational
          and scientific purposes in furtherance of: promoting an increased
          knowledge of computer science and its applications; promoting a
          greater interest in computer science and its applications; and
          providing a means of communication between persons having interest in
          computer science. The above purposes will be fulfilled by the
          organization of discussions and lectures with professionals and
          academics in the field of computer science and related fields, the
          maintenance of a library of materials related to computer science, the
          maintenance of an office containing the library as an aid to aim (1.3)
          above, and such other means as decided by the club membership.
        </div>
      ),
    },
    {
      name: "3. Membership",
      url: "c",
      content: (
        <div>
          {" "}
          In compliance with MathSoc regulations and in recognition of the club
          being primarily targeted at undergraduate students, full membership is
          open to all Social Members of the Mathematics Society and restricted
          to the same. Affiliate membership in this Club shall be open to all
          members of the University community, including alumni. Affiliate
          members shall have all the rights of full members except for the
          rights of voting and holding executive office. Membership shall be
          accounted for on a termly basis, where a term begins at the start of
          lectures in Winter or Spring, and at the start of Orientation Week in
          Fall. A person is not a member until he or she has paid the current
          membership fee and has been enrolled in the member database. The
          termly membership fee is set from time to time by the Executive. Under
          conditions approved by the Executive, a member who purchases a
          membership at the end of the current term may be given membership for
          both the current term and the next term. If the membership fee
          changes, then this does not affect the validity of any membership
          terms already paid for. The Club may grant access to its systems,
          either free of charge or for a fee, to members of the University
          community in order to offer them services. This does not constitute
          membership.
        </div>
      ),
    },
    {
      name: "Consequences of Unacceptable Behavior",
      url: "d",
      content: <div> CODEY </div>,
    },
  ];

  const readAllSection = {
    name: "Read All",
    url: "readall",
    content: <div> </div>,
  };

  sections = [readAllSection, ...sections];

  const [index, setIndex] = useState(0);

  function FakeLink({ url, children }: LinkProps) {
    return (
      <div
        onClick={() => {
          const target = sections.findIndex((section) => section.url === url);

          if (target >= 0) {
            setIndex(target);
          }
        }}
      >
        {children}
      </div>
    );
  }

  const { content } = sections[index];

  return (
    <OrganizedContent headings={sections} currentIndex={index} link={FakeLink}>
      {content}
    </OrganizedContent>
  );
}