2021-06-09 21:12:44 -04:00
|
|
|
import React, { useState } from "react";
|
2021-04-26 19:16:55 -04:00
|
|
|
|
2021-05-12 00:34:49 -04:00
|
|
|
import AfterHoursContent, {
|
|
|
|
metadata as afterHoursMetadata,
|
|
|
|
} from "../content/playground/after-hours.event.mdx";
|
2021-05-24 02:00:47 -04:00
|
|
|
import AltTab, {
|
|
|
|
metadata as altTabEventMetadata,
|
|
|
|
} from "../content/playground/alt-tab.event.mdx";
|
2021-08-13 04:16:37 -04:00
|
|
|
import CodeyInfo, {
|
|
|
|
metadata as codeyMetadata,
|
|
|
|
} from "../content/playground/codey.team-member.mdx";
|
2021-06-09 21:12:44 -04:00
|
|
|
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";
|
2021-08-13 04:16:37 -04:00
|
|
|
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";
|
2021-05-24 05:21:34 -04:00
|
|
|
import { metadata as dogeMetadata } from "../content/playground/doge.team-member.mdx";
|
2021-08-13 04:16:37 -04:00
|
|
|
import OOTBReact, {
|
|
|
|
metadata as OOTBReactEventMetadata,
|
|
|
|
} from "../content/playground/ootb-react.event.mdx";
|
2021-07-29 16:56:47 -04:00
|
|
|
import TempTechTalk, {
|
|
|
|
metadata as tempTechTalkMetadata,
|
|
|
|
} from "../content/playground/temp.talk.mdx";
|
2021-08-13 04:16:37 -04:00
|
|
|
import UnavailableContent, {
|
|
|
|
metadata as unavailableMetadata,
|
|
|
|
} from "../content/playground/unavailable.news.mdx";
|
2021-07-29 16:56:47 -04:00
|
|
|
|
2021-08-13 04:16:37 -04:00
|
|
|
import { Button } from "./Button";
|
2021-05-24 02:00:47 -04:00
|
|
|
import { EventCard } from "./EventCard";
|
2021-05-23 18:56:49 -04:00
|
|
|
import { EventDescriptionCard } from "./EventDescriptionCard";
|
2021-08-13 04:16:37 -04:00
|
|
|
import { Link } from "./Link";
|
|
|
|
import { MiniEventCard } from "./MiniEventCard";
|
|
|
|
import { MiniTechTalkCard } from "./MiniTechTalkCard";
|
|
|
|
import { NewsCard } from "./NewsCard";
|
2021-08-23 09:27:59 -04:00
|
|
|
import {
|
|
|
|
OrganizedContent,
|
|
|
|
LinkProps,
|
|
|
|
createReadAllSection,
|
|
|
|
} from "./OrganizedContent";
|
2021-05-23 18:56:49 -04:00
|
|
|
import { TeamMember } from "./TeamMember";
|
2021-05-24 05:21:34 -04:00
|
|
|
import { TeamMemberCard } from "./TeamMemberCard";
|
2021-07-29 16:56:47 -04:00
|
|
|
import { TechTalkCard } from "./TechTalkCard";
|
2021-08-13 04:16:37 -04:00
|
|
|
|
|
|
|
import styles from "./playground.module.css";
|
2021-05-12 00:34:49 -04:00
|
|
|
|
2021-05-24 03:41:50 -04:00
|
|
|
const events = [
|
|
|
|
{ Content: OOTBReact, metadata: OOTBReactEventMetadata },
|
2021-05-24 04:04:02 -04:00
|
|
|
{ Content: AfterHoursContent, metadata: afterHoursMetadata },
|
2021-05-24 03:41:50 -04:00
|
|
|
{ Content: AltTab, metadata: altTabEventMetadata },
|
|
|
|
];
|
2021-05-12 00:34:49 -04:00
|
|
|
|
2021-06-09 21:12:44 -04:00
|
|
|
const constitution = [
|
|
|
|
{ Content: Name, ...nameOrganizedContentMetadata },
|
|
|
|
{ Content: Purpose, ...purposeOrganizedContentMetadata },
|
|
|
|
{ Content: Membership, ...membershipOrganizedContentMetadata },
|
|
|
|
{ Content: Officers, ...officersOrganizedContentMetadata },
|
|
|
|
{ Content: Duties, ...dutiesOrganizedContentMetadata },
|
|
|
|
{
|
|
|
|
Content: ExecutiveCouncil,
|
|
|
|
...executiveCouncilOrganizedContentMetadata,
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
2021-05-24 03:41:50 -04:00
|
|
|
export function MiniEventCardDemo() {
|
2021-04-26 19:16:55 -04:00
|
|
|
return (
|
2021-05-12 00:34:49 -04:00
|
|
|
<div className={styles.miniEventCardDemo}>
|
2021-05-24 03:41:50 -04:00
|
|
|
{events.map(({ Content, metadata }) => (
|
|
|
|
<MiniEventCard
|
|
|
|
{...metadata}
|
|
|
|
description={<Content />}
|
|
|
|
key={metadata.name + metadata.date.toString()}
|
|
|
|
/>
|
|
|
|
))}
|
2021-05-12 00:34:49 -04:00
|
|
|
</div>
|
2021-04-26 19:16:55 -04:00
|
|
|
);
|
|
|
|
}
|
2021-05-14 04:03:26 -04:00
|
|
|
|
|
|
|
export function NewsCardDemo() {
|
|
|
|
return (
|
2021-05-23 18:56:49 -04:00
|
|
|
<div className={styles.newsDemo}>
|
2021-05-14 04:03:26 -04:00
|
|
|
<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>
|
|
|
|
);
|
|
|
|
}
|
2021-05-16 03:22:06 -04:00
|
|
|
|
2021-06-01 00:45:52 -04:00
|
|
|
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>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2021-05-16 03:22:06 -04:00
|
|
|
export function EventDescriptionCardDemo() {
|
|
|
|
return (
|
|
|
|
<div className={styles.eventDescriptionCardDemo}>
|
2021-05-24 03:41:50 -04:00
|
|
|
{events.map(({ metadata }) => (
|
|
|
|
<EventDescriptionCard
|
|
|
|
{...metadata}
|
|
|
|
key={metadata.name + metadata.date.toString()}
|
2021-06-26 23:33:09 -04:00
|
|
|
/>
|
2021-05-24 03:41:50 -04:00
|
|
|
))}
|
2021-05-16 03:22:06 -04:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2021-05-23 18:56:49 -04:00
|
|
|
|
2021-05-24 02:00:47 -04:00
|
|
|
export function EventCardDemo() {
|
|
|
|
return (
|
|
|
|
<>
|
2021-08-28 15:56:23 -04:00
|
|
|
{events.map(({ Content, metadata }, idx) => (
|
|
|
|
<>
|
|
|
|
<EventCard
|
|
|
|
{...metadata}
|
|
|
|
key={metadata.name + metadata.date.toDateString() + "1"}
|
|
|
|
showDescription
|
|
|
|
>
|
|
|
|
<Content />
|
|
|
|
</EventCard>
|
|
|
|
<EventCard
|
|
|
|
{...metadata}
|
|
|
|
key={metadata.name + metadata.date.toDateString() + "2"}
|
|
|
|
link="#"
|
|
|
|
>
|
|
|
|
<Content />
|
|
|
|
</EventCard>
|
|
|
|
</>
|
2021-05-24 02:00:47 -04:00
|
|
|
))}
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2021-05-23 18:56:49 -04:00
|
|
|
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}>
|
2021-08-23 11:11:42 -04:00
|
|
|
<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" />
|
2021-05-23 18:56:49 -04:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2021-05-24 05:21:34 -04:00
|
|
|
|
|
|
|
export function TeamMemberCardDemo() {
|
|
|
|
return (
|
|
|
|
<div className={styles.teamMemberCardDemo}>
|
2021-08-23 11:11:42 -04:00
|
|
|
<TeamMemberCard {...codeyMetadata} image="/images/playground/doge.jpg">
|
2021-05-24 05:21:34 -04:00
|
|
|
<CodeyInfo />
|
|
|
|
</TeamMemberCard>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2021-06-09 21:12:44 -04:00
|
|
|
|
2021-06-13 15:36:34 -04:00
|
|
|
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>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2021-06-09 21:12:44 -04:00
|
|
|
export function OrganizedContentDemo() {
|
2021-08-23 09:27:59 -04:00
|
|
|
const sections = [...constitution];
|
|
|
|
const readAllSection = createReadAllSection(
|
|
|
|
constitution.map(({ id, title, Content }) => ({
|
|
|
|
Content,
|
|
|
|
section: { id, title },
|
|
|
|
})),
|
|
|
|
true
|
|
|
|
);
|
|
|
|
sections.unshift({
|
|
|
|
...readAllSection.section,
|
|
|
|
Content: readAllSection.Content,
|
|
|
|
});
|
2021-06-09 21:12:44 -04:00
|
|
|
|
|
|
|
const [id, setId] = useState(sections[0].id);
|
|
|
|
|
|
|
|
function FakeLink({ className, id, children }: LinkProps) {
|
|
|
|
return (
|
|
|
|
<div className={className} onClick={() => setId(id)}>
|
|
|
|
{children}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2021-08-23 09:27:59 -04:00
|
|
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
|
|
const Content = sections.find(
|
|
|
|
({ id: sectionId }) => sectionId === id
|
|
|
|
)!.Content;
|
|
|
|
|
2021-06-09 21:12:44 -04:00
|
|
|
return (
|
2021-08-27 15:18:55 -04:00
|
|
|
<OrganizedContent
|
|
|
|
sections={sections}
|
|
|
|
id={id}
|
|
|
|
link={FakeLink}
|
|
|
|
pageTitle="Playground"
|
|
|
|
>
|
2021-08-23 09:27:59 -04:00
|
|
|
<Content />
|
|
|
|
</OrganizedContent>
|
2021-06-09 21:12:44 -04:00
|
|
|
);
|
|
|
|
}
|
2021-07-29 16:56:47 -04:00
|
|
|
|
|
|
|
export function TechTalkDemo() {
|
2021-08-26 00:30:30 -04:00
|
|
|
const poster =
|
|
|
|
tempTechTalkMetadata.thumbnails.large ??
|
|
|
|
tempTechTalkMetadata.thumbnails.small;
|
|
|
|
|
2021-07-29 16:56:47 -04:00
|
|
|
return (
|
|
|
|
<div>
|
2021-08-26 00:30:30 -04:00
|
|
|
<TechTalkCard {...tempTechTalkMetadata} poster={poster}>
|
2021-07-29 16:56:47 -04:00
|
|
|
<TempTechTalk />
|
|
|
|
</TechTalkCard>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export function MiniTechTalkDemo() {
|
|
|
|
return (
|
|
|
|
<div className={styles.miniTechTalkDemo}>
|
2021-08-26 00:30:30 -04:00
|
|
|
<MiniTechTalkCard
|
|
|
|
{...tempTechTalkMetadata}
|
|
|
|
poster={tempTechTalkMetadata.thumbnails.small}
|
|
|
|
/>
|
|
|
|
<MiniTechTalkCard
|
|
|
|
{...tempTechTalkMetadata}
|
|
|
|
poster={tempTechTalkMetadata.thumbnails.small}
|
|
|
|
/>
|
|
|
|
<MiniTechTalkCard
|
|
|
|
{...tempTechTalkMetadata}
|
|
|
|
poster={tempTechTalkMetadata.thumbnails.small}
|
|
|
|
/>
|
2021-07-29 16:56:47 -04:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|