www-new/components/NewsCard.tsx

import React, { ReactNode } from "react";

import styles from "./NewsCard.module.css";

interface NewsCardProps {
  date: Date;
  author: string;
  children: ReactNode;
  fit?: boolean;
}

export const NewsCard: React.FC<NewsCardProps> = ({
  date,
  author,
  children,
  fit = false,
}) => {
  const classes = fit ? [styles.card, styles.fit] : [styles.card];

  return (
    <article className={classes.join(" ")}>
      <h1 className={styles.date}>
        <time dateTime={date.toISOString()}>
          {date.toLocaleDateString("en-US", {
            year: "numeric",
            month: "long",
            day: "numeric",
          })}
        </time>
      </h1>
      <address className={styles.author}>{author}</address>
      <div className={styles.content}>{children}</div>
    </article>
  );
};