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 ReadAll, {
  metadata as readAllOrganizedContentMetadata,
} from "../content/playground/constitution/read-all.organized-content.mdx";
import Name, {
  metadata as nameOrganizedContentMetadata,
} from "../content/playground/constitution/name.organized-content.mdx";
import Purpose, {
  metadata as purposeOrganizedContentMetadata,
} from "../content/playground/constitution/purpose.organized-content.mdx";
import Membership, {
  metadata as membershipOrganizedContentMetadata,
} from "../content/playground/constitution/membership.organized-content.mdx";
import Officers, {
  metadata as officersOrganizedContentMetadata,
} from "../content/playground/constitution/officers.organized-content.mdx";
import Duties, {
  metadata as dutiesOrganizedContentMetadata,
} from "../content/playground/constitution/duties-of-officers.organized-content.mdx";
import ExecutiveCouncil, {
  metadata as executiveCouncilOrganizedContentMetadata,
} from "../content/playground/constitution/executive-council.organized-content.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 },
];

const constitution = [
  { content: <ReadAll />, ...readAllOrganizedContentMetadata },
  { 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 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() {
  const sections = constitution;

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

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

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

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