Add the NewsCard component
This commit is contained in:
parent
efd9eecdca
commit
de2e7cd739
|
@ -38,4 +38,5 @@
|
||||||
"files.exclude": {
|
"files.exclude": {
|
||||||
"node_modules": true
|
"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) {
|
.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, {
|
import AfterHoursContent, {
|
||||||
metadata as afterHoursMetadata,
|
metadata as afterHoursMetadata,
|
||||||
} from "../content/playground/after-hours.event.mdx";
|
} from "../content/playground/after-hours.event.mdx";
|
||||||
|
import UnavailableContent, {
|
||||||
|
metadata as unavailableMetadata,
|
||||||
|
} from "../content/playground/unavailable.news.mdx";
|
||||||
|
|
||||||
import { MiniEventCard } from "./MiniEventCard";
|
import { MiniEventCard } from "./MiniEventCard";
|
||||||
|
import { NewsCard } from "./NewsCard";
|
||||||
|
|
||||||
export function MiniEventCardDemo() {
|
export function MiniEventCardDemo() {
|
||||||
const { name, location, short, date } = afterHoursMetadata;
|
const { name, location, short, date } = afterHoursMetadata;
|
||||||
|
@ -50,3 +54,20 @@ export function MiniEventCardDemo() {
|
||||||
</div>
|
</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.
|
|
@ -1,16 +1,32 @@
|
||||||
/// <reference types="next" />
|
/// <reference types="next" />
|
||||||
/// <reference types="next/types/global" />
|
/// <reference types="next/types/global" />
|
||||||
|
|
||||||
interface EventMetadata {
|
|
||||||
name: string;
|
|
||||||
short: string;
|
|
||||||
date: Date;
|
|
||||||
location: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
declare module "*.event.mdx" {
|
declare module "*.event.mdx" {
|
||||||
|
import { ComponentType } from "react";
|
||||||
|
|
||||||
|
interface EventMetadata {
|
||||||
|
name: string;
|
||||||
|
short: string;
|
||||||
|
date: Date;
|
||||||
|
location: string;
|
||||||
|
}
|
||||||
|
|
||||||
const ReactComponent: ComponentType;
|
const ReactComponent: ComponentType;
|
||||||
|
|
||||||
export const metadata: EventMetadata;
|
export const metadata: EventMetadata;
|
||||||
export default ReactComponent;
|
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
|
# Playground
|
||||||
|
|
||||||
|
@ -7,4 +7,12 @@ import {MiniEventCardDemo} from '../components/playground'
|
||||||
The `<MiniEventCard />` component has a collapsible description, and it used on
|
The `<MiniEventCard />` component has a collapsible description, and it used on
|
||||||
the events page. It uses the `<details>` tag and works without JS!
|
the events page. It uses the `<details>` tag and works without JS!
|
||||||
|
|
||||||
<MiniEventCardDemo />
|
<MiniEventCardDemo />
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## `<NewsCard />`
|
||||||
|
|
||||||
|
unavailable
|
||||||
|
|
||||||
|
<NewsCardDemo />
|
Loading…
Reference in New Issue