Date (#2)

* add date to cards

* fix footer margin

* Update NotebookCard.js

---------

Co-authored-by: donsiamese <donsiamese@gmail.com>

src/components/NotebookCard.css

@@ -7,3 +7,16 @@
   font-size: var(--fs18px);
   font-weight: bold;
 }
+
+.NotebookCard .date {
+  display: flex;
+  align-items: center;
+}
+
+.NotebookCard .date > svg {
+  margin-right: 0.3rem;
+}
+
+.NotebookCard .date > span {
+  font-size: var(--font-small);
+}

src/components/NotebookCard.js

@@ -6,6 +6,7 @@ import "./NotebookCard.css"
 import { navigate } from "gatsby"
 import Avatar from "boring-avatars"
 import { ArrowRight } from "iconoir-react"
+import { DateTime } from "luxon"
 
 // const AvatarVariants = ["marble", "beam", "pixel", "sunset", "ring", "bauhaus"]
 const NotebookCard = ({ name }) => {
@@ -14,6 +15,8 @@ const NotebookCard = ({ name }) => {
   const navigateToNotebookPage = () => {
     navigate(`?view=${ModalNotebookPreviewView}&viewId=${name}`)
   }
+  const accessTime = notebook?.accessTime
+  const accessDateTime = DateTime.fromISO(accessTime)
 
   return (
     <div className="NotebookCard shadow-sm">
@@ -27,6 +30,9 @@ const NotebookCard = ({ name }) => {
           />
         </div>
         <div className="mx-3">
+          <div className="date">
+            <span>{accessDateTime.toFormat("yyyy LLL dd")}</span>
+          </div>
           <h3 className="m-0" onClick={navigateToNotebookPage}>
             {notebook?.title}
           </h3>

src/styles/style.css

@@ -54,6 +54,7 @@
   --font-size-h1: var(--fs80px);
   --font-size-h2: var(--fs40px);
   --font-size-h5: var(--fs18px);
+  --font-small: var(--fs12px);
 
   /* EASING */
   --backInOut: cubic-bezier(0.68, -0.55, 0.265, 1.55);