Create MiniEventCard
This commit is contained in:
parent
0c3026b744
commit
efd9eecdca
|
@ -2,6 +2,13 @@
|
|||
"typescript.tsdk": "node_modules/typescript/lib",
|
||||
"eslint.format.enable": true,
|
||||
"eslint.codeActionsOnSave.mode": "all",
|
||||
"[css]": {
|
||||
"editor.suggest.insertMode": "replace",
|
||||
"gitlens.codeLens.scopes": [
|
||||
"document"
|
||||
],
|
||||
"editor.formatOnSave": true
|
||||
},
|
||||
"[javascript]": {
|
||||
"editor.formatOnSave": false,
|
||||
"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 {
|
||||
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;
|
||||
}
|
||||
|
|
|
@ -2,6 +2,10 @@
|
|||
font-family: "Poppins", "sans-serif";
|
||||
}
|
||||
|
||||
code, pre {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
/* Default is light theme */
|
||||
body {
|
||||
--off-white: #fdf8f5;
|
||||
|
|
|
@ -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