Add the NewsCard component

.vscode/settings.json

@@ -38,4 +38,5 @@
   "files.exclude": {
     "node_modules": true
   },
+  "editor.tabSize": 2
 }

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;
+  }
+}

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<NewsCardProps> = ({
+  date,
+  author,
+  children,
+}) => {
+  return (
+    <article className={styles.card}>
+      <h3>
+        <time className={styles.date} dateTime={date.toISOString()}>
+          {date.toLocaleDateString("en-US", {
+            year: "numeric",
+            month: "long",
+            day: "numeric",
+          })}
+        </time>
+      </h3>
+      <address className={styles.author}>{author}</address>
+      <div className={styles.content}>{children}</div>
+    </article>
+  );
+};

components/playground.module.css

@@ -1,3 +1,41 @@
 .miniEventCardDemo > *:nth-child(odd) {
-  background: #E1EEFA;
-}
+  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;
+}

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() {
     </div>
   );
 }
+
+export function NewsCardDemo() {
+  return (
+    <div className={styles.news}>
+      <div className={styles.newsTitle}>News</div>
+      <div className={styles.newsDesc}>
+        Updates from our execs
+        <br />
+        <br />
+      </div>
+      <hr className={styles.newsHr} />
+      <NewsCard {...unavailableMetadata}>
+        <UnavailableContent />
+      </NewsCard>
+    </div>
+  );
+}

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.

next-env.d.ts

@@ -1,16 +1,32 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 
-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;
+}

pages/index.mdx

@@ -1 +1 @@
-Visit the [playground](/playground)
+Visit the [playground](/playground)

pages/index.module.css

@@ -1,3 +0,0 @@
-.Foo {
-  background-color: red;
-}

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 `<MiniEventCard />` component has a collapsible description, and it used on
 the events page. It uses the `<details>` tag and works without JS!
 
-<MiniEventCardDemo />
+<MiniEventCardDemo />
+
+---
+
+## `<NewsCard />`
+
+unavailable
+
+<NewsCardDemo />