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 />

---