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/pages/playground.mdx

127 lines
2.4 KiB

import {
MiniEventCardDemo,
NewsCardDemo,
EventDescriptionCardDemo,
LinkDemo,
EventCardDemo,
TeamMemberDemo,
TeamMemberCardDemo,
OrganizedContentDemo,
ButtonDemo,
TechTalkDemo,
MiniTechTalkDemo,
} from "@/components/playground";
import { ConnectWithUs } from "@/components/ConnectWithUs";
import { EmailSignup } from "@/components/EmailSignup";
import { TeamMemberCard } from "@/components/TeamMemberCard";
# Playground
## `<OrganizedContent />`
Codey is supposed to say something here...
<OrganizedContentDemo />
---
## `<MiniEventCard />`
The `<MiniEventCard />` component has a collapsible description, and it is used
on the events page. It uses the `<details>` tag and works without JS!
<MiniEventCardDemo />
---
## `<NewsCard />`
unavailable
<NewsCardDemo />
---
## `<Button />`
The `<Button />` is customizable in size and in whether it is an anchor tag or a button tag.
<ButtonDemo />
---
## `<EventDescriptionCard />`
The `<EventDescriptionCard />` component is used on the home page, and uses the
`<Button />` and `<EventSetting />` components.
<EventDescriptionCardDemo />
---
## `<EventCard />`
The `<EventCard />` component is used on the events page, and uses the
`<Button />` and `<EventSetting />` components.
<EventCardDemo />
---
## `<TeamMember />`
The `<TeamMember />` component has an image of the team member along with their name and role.
It is used on the Meet the Team page for non executive members.
<TeamMemberDemo />
---
## `<TeamMemberCard />`
The `<TeamMemberCard />` component is used on the "Meet the Team!" page to
display information about the execs: prez, VP, trez, AVP, and syscom overlord.
<TeamMemberCardDemo />
---
## `<Link />`
The `<Link />` component is used on various pages such as Meet the Team! and Our Supporters
<LinkDemo />
---
## `<TechTalkCard />`
The `<TechTalkCard />` component is used on the Resources page to display information
about Tech Talks.
<TechTalkDemo />
---
## `<MiniTechTalkCard />`
The `<MiniTechTalkCard />` component is used on the Resources page to display condensed
information about Tech Talks.
<MiniTechTalkDemo />
## `<ConnectWithUs />`
The `<ConnectWithUs />` component is used on various pages such as the About page and the Get Involved Page!
<ConnectWithUs />
---
## `<EmailSignup />`
The `<EmailSignup />` component is used on various pages such as the About page and the Get Involved Page!
<EmailSignup />
---