place items in a table

diff --git a/src/pages/podcasts/index.astro b/src/pages/podcasts/index.astro
index 0b23b716bd374d1e2a943dc5a6f5924dd7d7e7b7..32dbacc74ead7eabed371f22963a2661ac88db78 100644 (file)
--- a/src/pages/podcasts/index.astro
+++ b/src/pages/podcasts/index.astro
@@ -10,15 +10,36 @@ const sortedPodcasts = podcasts.sort((a, b) => b.data.date.getTime() - a.data.da
 
 <Base title="Podcasts" description="Weekly podcast episodes covering capital markets, Bitcoin, economic policy, and geopolitical events. Join Cameron Otsuka in his podcast appearances.">
     <h2>Podcasts</h2>
-    <dl>
-        {sortedPodcasts.map((podcast) => {
-            const date = formatDate(podcast.data.date);
-            return (
-                <dt><a href={`/podcasts/${createSlug(podcast.data.show)}-${podcast.id}/`}>{podcast.data.title}</a></dt>
-                <dd>
-                    {podcast.data.show} - {podcast.data.description}
-                </dd>
-            )
-        })}
-    </dl>
-</Base>
\ No newline at end of file
+    <table>
+        <thead>
+            <tr>
+                <th>Show</th>
+                <th>Title</th>
+                <th>Date</th>
+            </tr>
+        </thead>
+        <tbody>
+            {sortedPodcasts.map((podcast) => (
+                <tr>
+                    <td>{podcast.data.show}</td>
+                    <td>
+                        <dl>
+                            <dt><a href={`/podcasts/${createSlug(podcast.data.show)}-${podcast.id}/`}>{podcast.data.title}</a></dt>
+                            <dd>{podcast.data.description}</dd>
+                        </dl>
+                    </td>
+                    <td>{formatDate(podcast.data.date)}</td>
+                </tr>
+            ))}
+        </tbody>
+    </table>
+</Base>
+
+<style>
+    table {
+        width: 100%;
+    }
+    td:nth-child(2) {
+        text-align: left;
+    }
+</style>
\ No newline at end of file

diff --git a/src/pages/reviews/index.astro b/src/pages/reviews/index.astro
index 6ab44d9eae20c80704f58e2f86920f441b48ecdb..7516024d45bbaebe723840cc9ef516f959087054 100644 (file)
--- a/src/pages/reviews/index.astro
+++ b/src/pages/reviews/index.astro
@@ -1,6 +1,5 @@
 ---
 import { getCollection } from 'astro:content';
-import formatDate from '@utils/formatDate.ts';
 import Base from '@layouts/base.astro';
 import RatingDistribution from '@components/ratingdistribution/component.astro';
 import Rating from '@components/ui/rating.astro';
@@ -16,16 +15,32 @@ const sortedReviews = reviews.sort((a, b) => b.data.date.getTime() - a.data.date
         <RatingDistribution />
     </section>
     <section>
-        <dl>
-            {sortedReviews.map((review) => {
-                const date = formatDate(review.data.date);
-                return (
-                    <dt><a href={`/reviews/${review.data.type}/${review.id}/`}>{review.data.title}</a></dt>
-                    <dd>
-                        <Rating rating={review.data.rating} />
-                    </dd>
-                )
-            })}
-        </dl>
+        <table>
+            <thead>
+                <tr>
+                    <th>Type</th>
+                    <th>Title</th>
+                    <th>Rating</th>
+                </tr>
+            </thead>
+            <tbody>
+                {sortedReviews.map((review) => (
+                    <tr>
+                        <td>{review.data.type}</td>
+                        <td><a href={`/reviews/${review.data.type}/${review.id}/`}>{review.data.title}</a></td>
+                        <td><Rating rating={review.data.rating} /></td>
+                    </tr>
+                ))}
+            </tbody>
+        </table>
     </section>
-</Base>
\ No newline at end of file
+</Base>
+
+<style>
+    table {
+        width: 100%;
+    }
+    td:nth-child(2) {
+        text-align: left;
+    }
+</style>
\ No newline at end of file