2021-05-13 18:47:40 -04:00
|
|
|
import React, { useState } from "react";
|
2021-04-26 19:16:55 -04:00
|
|
|
import styles from "./playground.module.css";
|
|
|
|
|
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 OOTBReact, {
|
|
|
|
metadata as OOTBReactEventMetadata,
|
|
|
|
} from "../content/playground/ootb-react.event.mdx";
|
|
|
|
import AltTab, {
|
|
|
|
metadata as altTabEventMetadata,
|
|
|
|
} from "../content/playground/alt-tab.event.mdx";
|
|
|
|
|
2021-05-14 04:03:26 -04:00
|
|
|
import UnavailableContent, {
|
|
|
|
metadata as unavailableMetadata,
|
|
|
|
} from "../content/playground/unavailable.news.mdx";
|
2021-05-24 05:21:34 -04:00
|
|
|
import { metadata as dogeMetadata } from "../content/playground/doge.team-member.mdx";
|
|
|
|
import CodeyInfo, {
|
|
|
|
metadata as codeyMetadata,
|
|
|
|
} from "../content/playground/codey.team-member.mdx";
|
2021-05-12 00:34:49 -04:00
|
|
|
|
|
|
|
import { MiniEventCard } from "./MiniEventCard";
|
2021-05-14 04:03:26 -04:00
|
|
|
import { NewsCard } from "./NewsCard";
|
2021-05-24 02:00:47 -04:00
|
|
|
import { EventCard } from "./EventCard";
|
2021-05-23 18:56:49 -04:00
|
|
|
import { EventDescriptionCard } from "./EventDescriptionCard";
|
|
|
|
import { TeamMember } from "./TeamMember";
|
2021-05-24 05:21:34 -04:00
|
|
|
import { TeamMemberCard } from "./TeamMemberCard";
|
2021-05-13 18:47:40 -04:00
|
|
|
import { OrganizedContent, LinkProps } from "./OrganizedContent";
|
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
|
|
|
|
|
|
|
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-12 00:34:49 -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-12 00:34:49 -04:00
|
|
|
|
2021-05-16 03:22:06 -04:00
|
|
|
export function EventDescriptionCardDemo() {
|
2021-04-26 19:16:55 -04:00
|
|
|
return (
|
2021-05-16 03:22:06 -04:00
|
|
|
<div className={styles.eventDescriptionCardDemo}>
|
2021-05-24 03:41:50 -04:00
|
|
|
{events.map(({ metadata }) => (
|
|
|
|
<EventDescriptionCard
|
|
|
|
{...metadata}
|
|
|
|
key={metadata.name + metadata.date.toString()}
|
|
|
|
>
|
|
|
|
{metadata.short}
|
|
|
|
</EventDescriptionCard>
|
|
|
|
))}
|
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-05-24 03:41:50 -04:00
|
|
|
{events.map(({ Content, metadata }) => (
|
|
|
|
<EventCard
|
|
|
|
{...metadata}
|
|
|
|
key={metadata.name + metadata.date.toDateString()}
|
|
|
|
>
|
2021-05-24 02:00:47 -04:00
|
|
|
<Content />
|
|
|
|
</EventCard>
|
|
|
|
))}
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
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-05-24 05:21:34 -04:00
|
|
|
<TeamMember {...dogeMetadata} />
|
|
|
|
<TeamMember {...dogeMetadata} />
|
|
|
|
<TeamMember {...dogeMetadata} />
|
|
|
|
<TeamMember {...dogeMetadata} />
|
|
|
|
<TeamMember {...dogeMetadata} />
|
|
|
|
<TeamMember {...dogeMetadata} />
|
|
|
|
<TeamMember {...dogeMetadata} />
|
|
|
|
<TeamMember {...dogeMetadata} />
|
|
|
|
<TeamMember {...dogeMetadata} />
|
|
|
|
<TeamMember {...dogeMetadata} />
|
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}>
|
|
|
|
<TeamMemberCard {...codeyMetadata}>
|
|
|
|
<CodeyInfo />
|
|
|
|
</TeamMemberCard>
|
2021-05-12 00:34:49 -04:00
|
|
|
</div>
|
2021-05-24 17:49:44 -04:00
|
|
|
);
|
2021-05-13 18:47:40 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
export function OrganizedContentDemo() {
|
|
|
|
let sections = [
|
|
|
|
{
|
2021-05-18 20:56:11 -04:00
|
|
|
name: "1. Name",
|
2021-05-13 18:47:40 -04:00
|
|
|
url: "a",
|
2021-05-24 17:49:44 -04:00
|
|
|
content: (
|
|
|
|
<div>
|
|
|
|
{" "}
|
|
|
|
1. The name of this organization shall be the "Computer Science
|
|
|
|
Club of the University of Waterloo".
|
|
|
|
</div>
|
|
|
|
),
|
2021-05-13 18:47:40 -04:00
|
|
|
},
|
|
|
|
{
|
2021-05-18 20:56:11 -04:00
|
|
|
name: "2. Purpose",
|
2021-05-13 18:47:40 -04:00
|
|
|
url: "b",
|
2021-05-24 17:49:44 -04:00
|
|
|
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>
|
|
|
|
),
|
2021-05-13 18:47:40 -04:00
|
|
|
},
|
|
|
|
{
|
2021-05-18 20:56:11 -04:00
|
|
|
name: "3. Membership",
|
2021-05-13 18:47:40 -04:00
|
|
|
url: "c",
|
2021-05-24 17:49:44 -04:00
|
|
|
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>
|
|
|
|
),
|
2021-05-18 20:56:11 -04:00
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "Consequences of Unacceptable Behavior",
|
|
|
|
url: "d",
|
|
|
|
content: <div> CODEY </div>,
|
2021-05-13 18:47:40 -04:00
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
const readAllSection = {
|
2021-05-18 20:56:11 -04:00
|
|
|
name: "Read All",
|
2021-05-13 18:47:40 -04:00
|
|
|
url: "readall",
|
2021-05-24 18:48:17 -04:00
|
|
|
content: <div> </div>,
|
2021-05-24 17:49:44 -04:00
|
|
|
};
|
2021-05-13 18:47:40 -04:00
|
|
|
|
|
|
|
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>
|
2021-04-26 19:16:55 -04:00
|
|
|
);
|
|
|
|
}
|