parent
0c3026b744
commit
efd9eecdca
@ -0,0 +1,43 @@ |
||||
.miniEventCard { |
||||
max-width: 936px; |
||||
box-sizing: border-box; |
||||
position: relative; |
||||
color: var(--purple-2); |
||||
padding: 1.25rem; |
||||
font-size: 0.875rem; |
||||
} |
||||
|
||||
.name { |
||||
display: flex; |
||||
font-size: 1.125rem; |
||||
margin: 0; |
||||
} |
||||
|
||||
.nameSpacer { |
||||
width: 140px; |
||||
} |
||||
|
||||
.info { |
||||
margin-top: 0; |
||||
} |
||||
|
||||
.details { |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
cursor: pointer; |
||||
color: var(--blue-2); |
||||
margin: 1.25rem; |
||||
} |
||||
|
||||
.miniEventCard[open] .shortDescription { |
||||
display: none; |
||||
} |
||||
|
||||
.miniEventCard[open] .dropDownIcon { |
||||
transform: rotate(180deg); |
||||
} |
||||
|
||||
.miniEventCard > summary { |
||||
list-style: none; |
||||
} |
@ -0,0 +1,57 @@ |
||||
import React, { ReactNode } from "react"; |
||||
import styles from "./MiniEventCard.module.css"; |
||||
|
||||
interface Props { |
||||
name: string; |
||||
descriptionShort: string; |
||||
description: ReactNode; |
||||
location: string; |
||||
date: string; |
||||
time: string; |
||||
} |
||||
|
||||
const dropDownIcon = ( |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
width="14" |
||||
height="9" |
||||
viewBox="0 0 14 9" |
||||
fill="none" |
||||
className={styles.dropDownIcon} |
||||
> |
||||
<path |
||||
d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z" |
||||
fill="#1482E3" |
||||
/> |
||||
</svg> |
||||
); |
||||
|
||||
export const MiniEventCard: React.FC<Props> = ({ |
||||
name, |
||||
descriptionShort, |
||||
description, |
||||
location, |
||||
date, |
||||
time, |
||||
}) => { |
||||
return ( |
||||
<details className={styles.miniEventCard}> |
||||
<summary> |
||||
<div onClick={(event) => event.preventDefault()}> |
||||
<h2 className={styles.name}> |
||||
<div>{name}</div> |
||||
<div className={styles.nameSpacer}></div> |
||||
</h2> |
||||
<p className={styles.info}> |
||||
{location} | {date} | {time} |
||||
</p> |
||||
<p className={styles.shortDescription}>{descriptionShort}</p> |
||||
</div> |
||||
|
||||
<p className={styles.details}>View details {dropDownIcon}</p> |
||||
</summary> |
||||
|
||||
<div>{description}</div> |
||||
</details> |
||||
); |
||||
}; |
@ -1,12 +1,3 @@ |
||||
.playground { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
flex-direction: column; |
||||
padding: 0; |
||||
width: 250px; |
||||
height: 250px; |
||||
border-radius: 50%; |
||||
border: 4px solid var(--blue-2); |
||||
background-color: var(--off-white); |
||||
.miniEventCardDemo > *:nth-child(odd) { |
||||
background: #E1EEFA; |
||||
} |
@ -1,12 +1,52 @@ |
||||
import React from "react"; |
||||
|
||||
import styles from "./playground.module.css"; |
||||
|
||||
export function Playground() { |
||||
import AfterHoursContent, { |
||||
metadata as afterHoursMetadata, |
||||
} from "../content/playground/after-hours.event.mdx"; |
||||
|
||||
import { MiniEventCard } from "./MiniEventCard"; |
||||
|
||||
export function MiniEventCardDemo() { |
||||
const { name, location, short, date } = afterHoursMetadata; |
||||
|
||||
const dateString = date.toLocaleDateString("en-US", { |
||||
day: "numeric", |
||||
month: "long", |
||||
year: "numeric", |
||||
}); |
||||
const timeString = date.toLocaleTimeString("en-US", { |
||||
hour: "numeric", |
||||
minute: "numeric", |
||||
}); |
||||
|
||||
return ( |
||||
<ul className={styles.playground}> |
||||
<li>Some</li> |
||||
<li>React</li> |
||||
<li>Content</li> |
||||
</ul> |
||||
<div className={styles.miniEventCardDemo}> |
||||
<MiniEventCard |
||||
name={name} |
||||
date={dateString} |
||||
time={timeString} |
||||
descriptionShort={short} |
||||
location={location} |
||||
description={<AfterHoursContent />} |
||||
/> |
||||
<MiniEventCard |
||||
name={name} |
||||
date={dateString} |
||||
time={timeString} |
||||
descriptionShort={short} |
||||
location={location} |
||||
description={<AfterHoursContent />} |
||||
/> |
||||
<MiniEventCard |
||||
name={name} |
||||
date={dateString} |
||||
time={timeString} |
||||
descriptionShort={short} |
||||
location={location} |
||||
description={<AfterHoursContent />} |
||||
/> |
||||
</div> |
||||
); |
||||
} |
||||
|
@ -0,0 +1,19 @@ |
||||
export const metadata = { |
||||
name: "Afterhours: Personal Relationships", |
||||
short: "Learn how React works and make your own version!", |
||||
date: new Date("2021-03-02 2:00 PM"), |
||||
location: "Online - Twitch", |
||||
}; |
||||
|
||||
The past year has been tough for all of us, having to deal with the pandemic |
||||
while studying or working remotely. If you've felt that meeting new people and |
||||
sustaining relationships with others has never been more challenging, we feel |
||||
that too, and we want to talk about it. |
||||
|
||||
CSC brings you the third chapter of Afterhours, and this time we're discussing |
||||
Personal Relationships. Join us for a chat about how our relationships |
||||
(platonic and romantic) have been affected, whether that be due to co-op, |
||||
sequence changes, or COVID. We'll be sharing our own personal stories and we'd |
||||
love for you all to join in on the discussion. |
||||
|
||||
Registration is required for attendance, so don't miss out! |
@ -1,2 +1,16 @@ |
||||
/// <reference types="next" />
|
||||
/// <reference types="next/types/global" />
|
||||
|
||||
interface EventMetadata { |
||||
name: string; |
||||
short: string; |
||||
date: Date; |
||||
location: string; |
||||
} |
||||
|
||||
declare module "*.event.mdx" { |
||||
const ReactComponent: ComponentType; |
||||
|
||||
export const metadata: EventMetadata; |
||||
export default ReactComponent; |
||||
} |
||||
|
@ -1,14 +1 @@ |
||||
# Home page |
||||
|
||||
Let's write some markdown. |
||||
|
||||
- foo |
||||
- bar |
||||
- baz |
||||
|
||||
## Subtopic |
||||
|
||||
More stuff |
||||
|
||||
1. hello |
||||
1. world |
||||
Visit the [playground](/playground) |
@ -1,11 +1,10 @@ |
||||
import {Playground} from '../components/playground' |
||||
import {MiniEventCardDemo} from '../components/playground' |
||||
|
||||
# Playground |
||||
|
||||
- _Some_ |
||||
- **Markdown** |
||||
- [Content](https://csclub.uwaterloo.ca) |
||||
## `<MiniEventCard />` |
||||
|
||||
--- |
||||
The `<MiniEventCard />` component has a collapsible description, and it used on |
||||
the events page. It uses the `<details>` tag and works without JS! |
||||
|
||||
<Playground /> |
||||
<MiniEventCardDemo /> |
Loading…
Reference in new issue