Create MiniEventCard

amy-random-shapes
Linhui Luo 2 years ago committed by Adi Thakral
parent 0c3026b744
commit efd9eecdca
  1. 7
      .vscode/settings.json
  2. 43
      components/MiniEventCard.module.css
  3. 57
      components/MiniEventCard.tsx
  4. 13
      components/playground.module.css
  5. 52
      components/playground.tsx
  6. 19
      content/playground/after-hours.event.mdx
  7. 14
      next-env.d.ts
  8. 4
      pages/_app.css
  9. 15
      pages/index.mdx
  10. 11
      pages/playground.mdx

@ -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!

14
next-env.d.ts vendored

@ -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…
Cancel
Save