article list init

src/articles/ArticlesList.tsx

@@ -0,0 +1,56 @@
+import {Article} from "./articles";
+import allBlack from "../img/IMG_3095.jpg";
+import {lazy, useState} from "react";
+import "./list.sass";
+import {ReactComponent as BoxSvg} from "../img/blog-box.svg";
+import {Reader} from "./Reader";
+
+const ARTICLES: Article[] = [{
+  name: "My high school experience",
+  description: "My first program, winning two senior superlatives, and why (and how) I chose Georgia Tech",
+  thumbnail: allBlack,
+  published: new Date(),
+  article: lazy(() => import("../about/About.mdx"))
+}];
+
+export function ArticlesList() {
+  const [reading, setReading] = useState<Article | null>(null);
+
+  return <main className="art-ctr">
+    <section className="spacer"/>
+    <section className="articles">
+      {
+        ARTICLES.map(a =>
+          <BlogBox article={a} setReading={setReading}/>
+        )
+      }
+      {
+        reading && <Reader {...reading}/>
+      }
+    </section>
+    <section className="spacer"/>
+  </main>
+}
+
+function BlogBox(props: { article: Article, setReading: (_: Article) => void}) {
+  const {article,
+    article: {name, description, thumbnail, published},
+    setReading} = props;
+
+  return (
+    <button className="link" onClick={() => setReading(article)}>
+      <div>
+        <img className="thumbnail" alt={`${name} thumbnail`} src={thumbnail}/>
+        <div className="titles">
+          <h1>{name}</h1>
+          <div className="desc">
+            <h3>{description}</h3>
+            <p>{published.toDateString()}</p>
+          </div>
+        </div>
+      </div>
+      <BoxSvg className='box-wave'/>
+    </button>
+
+  )
+}