Update styles

src/components/ui/NoteItem.jsx

@@ -0,0 +1,13 @@
+export default function NoteItem({ note }) {
+  const title = note.data.title
+  const pubDate = new Date(note.data.pubDate).toDateString().slice(4, 15)
+
+  return (
+    <a href={`/notes/${note.id}`}>
+      <div class="flex flex-col justify-between md:flex-row md:mb-3 mb-3 bg-[#1E262F] p-6 text-lg rounded-lg">
+        <div class="mr-2">{title}</div>
+        <div class="text-[#7E8C9A] shrink-0">{pubDate}</div>
+      </div>
+    </a>
+  )
+}

src/components/ui/TagItem.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 export default function TagItem({ tag }) {
   return (
     <a href={`/tags/${tag}`}>

src/pages/index.astro

@@ -1,7 +1,7 @@
 ---
 import Main from '../layouts/Main.astro'
 import { getCollection } from 'astro:content'
-import FeedItem from '../components/ui/FeedItem'
+import NoteItem from '../components/ui/NoteItem'
 
 const allNotes = await getCollection('notes')
 allNotes.sort((a, b) => Date.parse(b.data.pubDate) - Date.parse(a.data.pubDate))
@@ -25,6 +25,6 @@ allNotes.sort((a, b) => Date.parse(b.data.pubDate) - Date.parse(a.data.pubDate))
   </div>
 
   {allNotes.slice(0, 5).map((note) =>
-    <FeedItem client:load note={note} />
+    <NoteItem client:load note={note} />
   )}
 </Main>

src/pages/tags/[tag].astro

@@ -1,7 +1,7 @@
 ---
 import Main from '../../layouts/Main.astro'
 import { getCollection } from 'astro:content'
-import FeedItem from '../../components/ui/FeedItem'
+import NoteItem from '../../components/ui/NoteItem'
 
 export async function getStaticPaths() {
   const allNotes = await getCollection('notes')
@@ -30,6 +30,6 @@ const title = `Tag: ${tag}`
 >
   <div class="mb-6 text-xl">{filteredNotes.length} notes tagged with <span class="font-bold">{tag}</span>:</div>
   {filteredNotes.map((note) =>
-    <FeedItem client:load note={note} />
+    <NoteItem client:load note={note} />
   )}
 </Main>