Computer Science Club of the University of Waterloo's website.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
www-new/components/playground.tsx

271 lines
7.7 KiB

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()}
>
<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 readAllSection = createReadAllSection(
constitution.map(({ id, title, Content }) => ({
Content,
section: { id, title },
})),
true
);
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}>
<Content />
</OrganizedContent>
);
}
export function TechTalkDemo() {
return (
<div>
<TechTalkCard {...tempTechTalkMetadata}>
<TempTechTalk />
</TechTalkCard>
</div>
);
}
export function MiniTechTalkDemo() {
return (
<div className={styles.miniTechTalkDemo}>
<MiniTechTalkCard {...tempTechTalkMetadata}>
<TempTechTalk />
</MiniTechTalkCard>
<MiniTechTalkCard {...tempTechTalkMetadata}>
<TempTechTalk />
</MiniTechTalkCard>
<MiniTechTalkCard {...tempTechTalkMetadata}>
<TempTechTalk />
</MiniTechTalkCard>
</div>
);
}