From efd9eecdca58f5c2606e559a3545dac57c25e994 Mon Sep 17 00:00:00 2001 From: Linhui Luo Date: Wed, 12 May 2021 00:34:49 -0400 Subject: [PATCH] Create MiniEventCard --- .vscode/settings.json | 7 +++ components/MiniEventCard.module.css | 43 ++++++++++++++++++ components/MiniEventCard.tsx | 57 ++++++++++++++++++++++++ components/playground.module.css | 13 +----- components/playground.tsx | 52 ++++++++++++++++++--- content/playground/after-hours.event.mdx | 19 ++++++++ next-env.d.ts | 14 ++++++ pages/_app.css | 4 ++ pages/index.mdx | 15 +------ pages/playground.mdx | 11 +++-- 10 files changed, 198 insertions(+), 37 deletions(-) create mode 100644 components/MiniEventCard.module.css create mode 100644 components/MiniEventCard.tsx create mode 100644 content/playground/after-hours.event.mdx diff --git a/.vscode/settings.json b/.vscode/settings.json index 84e95c43..beeb26f4 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -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": { diff --git a/components/MiniEventCard.module.css b/components/MiniEventCard.module.css new file mode 100644 index 00000000..d6897613 --- /dev/null +++ b/components/MiniEventCard.module.css @@ -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; +} diff --git a/components/MiniEventCard.tsx b/components/MiniEventCard.tsx new file mode 100644 index 00000000..acbd1d63 --- /dev/null +++ b/components/MiniEventCard.tsx @@ -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 = ( + + + +); + +export const MiniEventCard: React.FC = ({ + name, + descriptionShort, + description, + location, + date, + time, +}) => { + return ( +
+ +
event.preventDefault()}> +

+
{name}
+
+

+

+ {location} | {date} | {time} +

+

{descriptionShort}

+
+ +

View details {dropDownIcon}

+ + +
{description}
+
+ ); +}; diff --git a/components/playground.module.css b/components/playground.module.css index 8b14457a..ec70cf46 100644 --- a/components/playground.module.css +++ b/components/playground.module.css @@ -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; } \ No newline at end of file diff --git a/components/playground.tsx b/components/playground.tsx index aa3d14ce..bbb85e0e 100644 --- a/components/playground.tsx +++ b/components/playground.tsx @@ -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 ( - +
+ } + /> + } + /> + } + /> +
); } diff --git a/content/playground/after-hours.event.mdx b/content/playground/after-hours.event.mdx new file mode 100644 index 00000000..45fdb7d3 --- /dev/null +++ b/content/playground/after-hours.event.mdx @@ -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! diff --git a/next-env.d.ts b/next-env.d.ts index 7b7aa2c7..0c47f061 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,2 +1,16 @@ /// /// + +interface EventMetadata { + name: string; + short: string; + date: Date; + location: string; +} + +declare module "*.event.mdx" { + const ReactComponent: ComponentType; + + export const metadata: EventMetadata; + export default ReactComponent; +} diff --git a/pages/_app.css b/pages/_app.css index 068d8cec..dd661abc 100644 --- a/pages/_app.css +++ b/pages/_app.css @@ -2,6 +2,10 @@ font-family: "Poppins", "sans-serif"; } +code, pre { + font-family: monospace; +} + /* Default is light theme */ body { --off-white: #fdf8f5; diff --git a/pages/index.mdx b/pages/index.mdx index 19453bcd..2ad8a3f5 100644 --- a/pages/index.mdx +++ b/pages/index.mdx @@ -1,14 +1 @@ -# Home page - -Let's write some markdown. - -- foo -- bar -- baz - -## Subtopic - -More stuff - -1. hello -1. world \ No newline at end of file +Visit the [playground](/playground) \ No newline at end of file diff --git a/pages/playground.mdx b/pages/playground.mdx index b453326d..87d8a405 100644 --- a/pages/playground.mdx +++ b/pages/playground.mdx @@ -1,11 +1,10 @@ -import {Playground} from '../components/playground' +import {MiniEventCardDemo} from '../components/playground' # Playground -- _Some_ -- **Markdown** -- [Content](https://csclub.uwaterloo.ca) +## `` ---- +The `` component has a collapsible description, and it used on +the events page. It uses the `
` tag and works without JS! - \ No newline at end of file + \ No newline at end of file