From de2e7cd739a697fa0df86e22cc9362240990ca28 Mon Sep 17 00:00:00 2001 From: Dora Su Date: Fri, 14 May 2021 04:03:26 -0400 Subject: [PATCH] Add the NewsCard component --- .vscode/settings.json | 1 + components/NewsCard.module.css | 33 +++++++++++++++++++ components/NewsCard.tsx | 30 ++++++++++++++++++ components/playground.module.css | 42 +++++++++++++++++++++++-- components/playground.tsx | 21 +++++++++++++ content/playground/unavailable.news.mdx | 14 +++++++++ next-env.d.ts | 30 +++++++++++++----- pages/index.mdx | 2 +- pages/index.module.css | 3 -- pages/playground.mdx | 12 +++++-- 10 files changed, 173 insertions(+), 15 deletions(-) create mode 100644 components/NewsCard.module.css create mode 100644 components/NewsCard.tsx create mode 100644 content/playground/unavailable.news.mdx delete mode 100644 pages/index.module.css diff --git a/.vscode/settings.json b/.vscode/settings.json index beeb26f4..68d9b3b3 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -38,4 +38,5 @@ "files.exclude": { "node_modules": true }, + "editor.tabSize": 2 } \ No newline at end of file diff --git a/components/NewsCard.module.css b/components/NewsCard.module.css new file mode 100644 index 00000000..ee79eb84 --- /dev/null +++ b/components/NewsCard.module.css @@ -0,0 +1,33 @@ +.card { + padding: 1.6875rem 2.4375rem; + max-width: 524px; + background-color: white; +} + +.date { + color: var(--purple-2); + font-size: 1.125rem; + font-weight: bold; + line-height: 1.6875rem; +} + +.author { + color: var(--purple-1); + font-style: normal; + line-height: 1.3125rem; + font-size: 0.875rem; + margin: 0.3125rem 0rem 0.4375rem 0rem; +} + +.content { + line-height: 1.3125rem; + color: var(--purple-2); + font-size: 0.875rem; +} + +@media only screen and (max-width: 768px) { + .card { + padding: 0; + background-color: transparent; + } +} diff --git a/components/NewsCard.tsx b/components/NewsCard.tsx new file mode 100644 index 00000000..765749d6 --- /dev/null +++ b/components/NewsCard.tsx @@ -0,0 +1,30 @@ +import React, { ReactNode } from "react"; +import styles from "./NewsCard.module.css"; + +interface NewsCardProps { + date: Date; + author: string; + children: ReactNode; +} + +export const NewsCard: React.FC = ({ + date, + author, + children, +}) => { + return ( +
+

+ +

+
{author}
+
{children}
+
+ ); +}; diff --git a/components/playground.module.css b/components/playground.module.css index ec70cf46..bb7eff6a 100644 --- a/components/playground.module.css +++ b/components/playground.module.css @@ -1,3 +1,41 @@ .miniEventCardDemo > *:nth-child(odd) { - background: #E1EEFA; -} \ No newline at end of file + background: #e1eefa; +} + +.news { + padding: 50px; + background-color: var(--off-white); + display: inline-block; +} + +@media only screen and (max-width: 768px) { + .news { + background-color: #e1eefa; + } +} + +.newsTitle { + font-style: normal; + font-weight: bold; + color: var(--purple-2); + font-size: 24px; + line-height: 36px; + margin-bottom: 14px; +} + +.newsDesc { + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 21px; + white-space: pre-line; + color: var(--purple-2); + vertical-align: baseline; +} + +.news > hr { + border: none; + height: 1px; + background-color: var(--purple-2); + margin: 0 0 13px 0; +} diff --git a/components/playground.tsx b/components/playground.tsx index bbb85e0e..a3f5fca4 100644 --- a/components/playground.tsx +++ b/components/playground.tsx @@ -5,8 +5,12 @@ import styles from "./playground.module.css"; import AfterHoursContent, { metadata as afterHoursMetadata, } from "../content/playground/after-hours.event.mdx"; +import UnavailableContent, { + metadata as unavailableMetadata, +} from "../content/playground/unavailable.news.mdx"; import { MiniEventCard } from "./MiniEventCard"; +import { NewsCard } from "./NewsCard"; export function MiniEventCardDemo() { const { name, location, short, date } = afterHoursMetadata; @@ -50,3 +54,20 @@ export function MiniEventCardDemo() { ); } + +export function NewsCardDemo() { + return ( +
+
News
+
+ Updates from our execs +
+
+
+
+ + + +
+ ); +} diff --git a/content/playground/unavailable.news.mdx b/content/playground/unavailable.news.mdx new file mode 100644 index 00000000..74919ef8 --- /dev/null +++ b/content/playground/unavailable.news.mdx @@ -0,0 +1,14 @@ +export const metadata = { + author: "merenber", + date: new Date("2021-03-19"), +} + +Computer Science Club systems and services will be unavailable on Saturday, Mar. 20 +due to a planned power outage in the Mathematics and Computer Building (MC) from 7am to 5pm. + +The CSC will begin shutting down machines at 6am in preparation of the outage. +Please prepare for the outage by: + +- Ensuring all running processes have their state saved (configuration, data, etc.) +- Any important files are backed up off-site from the CSC +- If you have any questions/concerns, please email the Systems Committee. \ No newline at end of file diff --git a/next-env.d.ts b/next-env.d.ts index 0c47f061..ed11a509 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,16 +1,32 @@ /// /// -interface EventMetadata { - name: string; - short: string; - date: Date; - location: string; -} - declare module "*.event.mdx" { + import { ComponentType } from "react"; + + interface EventMetadata { + name: string; + short: string; + date: Date; + location: string; + } + const ReactComponent: ComponentType; export const metadata: EventMetadata; export default ReactComponent; } + +declare module "*.news.mdx" { + import { ComponentType } from "react"; + + interface NewsMetadata { + author: string; + date: Date; + } + + const ReactComponent: ComponentType; + + export const metadata: NewsMetadata; + export default ReactComponent; +} diff --git a/pages/index.mdx b/pages/index.mdx index 2ad8a3f5..7a6200c7 100644 --- a/pages/index.mdx +++ b/pages/index.mdx @@ -1 +1 @@ -Visit the [playground](/playground) \ No newline at end of file +Visit the [playground](/playground) diff --git a/pages/index.module.css b/pages/index.module.css deleted file mode 100644 index 4c137b02..00000000 --- a/pages/index.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.Foo { - background-color: red; -} \ No newline at end of file diff --git a/pages/playground.mdx b/pages/playground.mdx index 87d8a405..7efaeb5f 100644 --- a/pages/playground.mdx +++ b/pages/playground.mdx @@ -1,4 +1,4 @@ -import {MiniEventCardDemo} from '../components/playground' +import {MiniEventCardDemo, NewsCardDemo} from '../components/playground' # Playground @@ -7,4 +7,12 @@ import {MiniEventCardDemo} from '../components/playground' 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 + + +--- + +## `` + +unavailable + + \ No newline at end of file