2021-05-14 04:03:26 -04:00
|
|
|
import React, { ReactNode } from "react";
|
2021-08-13 04:16:37 -04:00
|
|
|
|
2021-05-14 04:03:26 -04:00
|
|
|
import styles from "./NewsCard.module.css";
|
|
|
|
|
|
|
|
interface NewsCardProps {
|
|
|
|
date: Date;
|
|
|
|
author: string;
|
|
|
|
children: ReactNode;
|
2021-08-17 15:22:19 -04:00
|
|
|
fit?: boolean;
|
2021-05-14 04:03:26 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
export const NewsCard: React.FC<NewsCardProps> = ({
|
|
|
|
date,
|
|
|
|
author,
|
|
|
|
children,
|
2021-08-17 15:22:19 -04:00
|
|
|
fit = false,
|
2021-05-14 04:03:26 -04:00
|
|
|
}) => {
|
2021-08-17 15:22:19 -04:00
|
|
|
const classes = fit ? [styles.card, styles.fit] : [styles.card];
|
|
|
|
|
2021-05-14 04:03:26 -04:00
|
|
|
return (
|
2021-08-17 15:22:19 -04:00
|
|
|
<article className={classes.join(" ")}>
|
2021-06-26 23:33:09 -04:00
|
|
|
<h1 className={styles.date}>
|
|
|
|
<time dateTime={date.toISOString()}>
|
2021-05-14 04:03:26 -04:00
|
|
|
{date.toLocaleDateString("en-US", {
|
|
|
|
year: "numeric",
|
|
|
|
month: "long",
|
|
|
|
day: "numeric",
|
|
|
|
})}
|
|
|
|
</time>
|
2021-06-26 23:33:09 -04:00
|
|
|
</h1>
|
2021-05-14 04:03:26 -04:00
|
|
|
<address className={styles.author}>{author}</address>
|
|
|
|
<div className={styles.content}>{children}</div>
|
|
|
|
</article>
|
|
|
|
);
|
|
|
|
};
|