Create MiniEventCard
This commit is contained in:
parent
0c3026b744
commit
efd9eecdca
|
@ -2,6 +2,13 @@
|
||||||
"typescript.tsdk": "node_modules/typescript/lib",
|
"typescript.tsdk": "node_modules/typescript/lib",
|
||||||
"eslint.format.enable": true,
|
"eslint.format.enable": true,
|
||||||
"eslint.codeActionsOnSave.mode": "all",
|
"eslint.codeActionsOnSave.mode": "all",
|
||||||
|
"[css]": {
|
||||||
|
"editor.suggest.insertMode": "replace",
|
||||||
|
"gitlens.codeLens.scopes": [
|
||||||
|
"document"
|
||||||
|
],
|
||||||
|
"editor.formatOnSave": true
|
||||||
|
},
|
||||||
"[javascript]": {
|
"[javascript]": {
|
||||||
"editor.formatOnSave": false,
|
"editor.formatOnSave": false,
|
||||||
"editor.codeActionsOnSave": {
|
"editor.codeActionsOnSave": {
|
||||||
|
|
|
@ -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 {
|
.miniEventCardDemo > *:nth-child(odd) {
|
||||||
display: flex;
|
background: #E1EEFA;
|
||||||
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);
|
|
||||||
}
|
}
|
|
@ -1,12 +1,52 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
import styles from "./playground.module.css";
|
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 (
|
return (
|
||||||
<ul className={styles.playground}>
|
<div className={styles.miniEventCardDemo}>
|
||||||
<li>Some</li>
|
<MiniEventCard
|
||||||
<li>React</li>
|
name={name}
|
||||||
<li>Content</li>
|
date={dateString}
|
||||||
</ul>
|
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" />
|
||||||
/// <reference types="next/types/global" />
|
/// <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;
|
||||||
|
}
|
||||||
|
|
|
@ -2,6 +2,10 @@
|
||||||
font-family: "Poppins", "sans-serif";
|
font-family: "Poppins", "sans-serif";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
code, pre {
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
/* Default is light theme */
|
/* Default is light theme */
|
||||||
body {
|
body {
|
||||||
--off-white: #fdf8f5;
|
--off-white: #fdf8f5;
|
||||||
|
|
|
@ -1,14 +1 @@
|
||||||
# Home page
|
Visit the [playground](/playground)
|
||||||
|
|
||||||
Let's write some markdown.
|
|
||||||
|
|
||||||
- foo
|
|
||||||
- bar
|
|
||||||
- baz
|
|
||||||
|
|
||||||
## Subtopic
|
|
||||||
|
|
||||||
More stuff
|
|
||||||
|
|
||||||
1. hello
|
|
||||||
1. world
|
|
|
@ -1,11 +1,10 @@
|
||||||
import {Playground} from '../components/playground'
|
import {MiniEventCardDemo} from '../components/playground'
|
||||||
|
|
||||||
# Playground
|
# Playground
|
||||||
|
|
||||||
- _Some_
|
## `<MiniEventCard />`
|
||||||
- **Markdown**
|
|
||||||
- [Content](https://csclub.uwaterloo.ca)
|
|
||||||
|
|
||||||
---
|
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