Fix date error + clean code

components/NewsCard.tsx

@@ -1,28 +1,30 @@
 import React, { ReactNode } from "react";
-import styles from './newscard.module.css'
+import styles from "./newscard.module.css";
 
 interface NewsCardProps {
-    date: Date;
-    author: string;
-    children: ReactNode;
+  date: Date;
+  author: string;
+  children: ReactNode;
 }
 
- export const NewsCard: React.FC<NewsCardProps> = ({date,author,children}) => {
-    const options = {year:'numeric', month:'long',day:'numeric'};
-
-    return(
-        <article className={styles.card}>
-            <h3>
-                <time className={styles.date}>
-                    {date.toLocaleDateString('en-US', options)}
-                </time>
-            </h3>
-            <address className={styles.author}>
-                    {author}
-            </address>
-            <div className={styles.content}>
-                {children}
-            </div>
-        </article>
-    )
-};
+export const NewsCard: React.FC<NewsCardProps> = ({
+  date,
+  author,
+  children,
+}) => {
+  return (
+    <article className={styles.card}>
+      <h3>
+        <time className={styles.date}>
+          {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>
+  );
+};

package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@mdx-js/loader": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "@next/mdx": "^10.2.0",
+    "@next/mdx": "^10.1.3",
     "date-fns": "^2.11.1",
     "gray-matter": "^4.0.2",
     "next": "^10.0.0",

pages/index.module.css

@@ -1,37 +1,3 @@
-.component {
-  padding: 50px;
-  background-color: var(--off-white);
-  /* position: absolute; */
-}
-
-@media only screen and (max-width: 768px) { 
-  .component {
-      background-color: #E1EEFA;
-  }
-}
-
-.title {
-  font-style: normal;
-  font-weight: bold;
-  color: var(--purple-2);
-  font-size: 24px;
-  line-height: 36px;
-  margin-bottom: 14px;
-}
-
-.desc {
-  font-style: normal;
-  font-weight: normal;
-  font-size: 14px;
-  line-height: 21px;
-  white-space: pre-line;
-  color: var(--purple-2);
-  vertical-align: baseline;
-}
-
-.hr {
-  border: none;
-  height: 1px;
-  background-color: var(--purple-2);
-  margin: 0 0 13px 0;
-}
+.Foo {
+  background-color: red;
+}