Add the NewsCard component

amy-random-shapes
Dora Su 2 years ago committed by Adi Thakral
parent efd9eecdca
commit de2e7cd739
  1. 1
      .vscode/settings.json
  2. 33
      components/NewsCard.module.css
  3. 30
      components/NewsCard.tsx
  4. 42
      components/playground.module.css
  5. 21
      components/playground.tsx
  6. 14
      content/playground/unavailable.news.mdx
  7. 30
      next-env.d.ts
  8. 2
      pages/index.mdx
  9. 3
      pages/index.module.css
  10. 12
      pages/playground.mdx

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

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

@ -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>
);
};

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

@ -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>
);
}

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

30
next-env.d.ts vendored

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

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

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

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