Initial commit

src/components/MediaPreview.astro

@@ -0,0 +1,48 @@
+---
+import { getMonthName } from '$/utils'
+const { post } = Astro.props
+---
+<div class="post-preview">
+    <div class="sm:w-20 md:w-32">
+        <div class="post-preview__date">
+            <span class="post-preview__date__day">{ new Date(post.date).getDate() }</span>
+            <span class="post-preview__date__month-n-year">{ `${getMonthName(post.date)} ${new Date(post.date).getFullYear()}` }</span>
+        </div>
+    </div>
+    <div class="flex-1">
+        <div class="flex flex-col mb-2">
+            <h4 class="post-preview__title">
+                <a href={post.url} title={post.title} target="_blank">{post.title}</a>
+            </h4>
+            <div>
+            <strong>{post.host}</strong>
+            {
+                post.participants.length > 0 && ` <em>with</em> ${post.participants.join(', ')}`
+            }
+            </div>
+        </div>
+        <p class="post-preview__desc">
+            {post.description}
+        </p>
+    </div>
+</div>
+<style>
+    .post-preview {
+        @apply  flex gap-6
+    }
+    .post-preview__date {
+        @apply flex flex-col w-full text-center
+    }
+    .post-preview__date__day {
+        @apply text-6xl font-semibold text-gray-500 dark:text-gray-300
+    }
+    .post-preview__date__month-n-year {
+        @apply text-gray-400
+    }
+    .post-preview__title {
+        @apply text-2xl font-semibold text-theme-primary dark:text-theme-dark-primary hover:underline
+    }
+    .post-preview__desc {
+        @apply text-lg leading-6 dark:text-white line-clamp-2
+    }
+</style>