Mark Randall Havens
63 lines
1.9 KiB
Plaintext
63 lines
1.9 KiB
Plaintext
---
|
|
import type { CollectionEntry } from 'astro:content'
|
|
import { getMonthName } from '$/utils'
|
|
|
|
interface Props {
|
|
post: CollectionEntry<'blog'>,
|
|
asCard?: boolean
|
|
}
|
|
|
|
const { post: { data: post, slug }, asCard = false } = Astro.props
|
|
---
|
|
<div class={`post-preview ${asCard && 'post-preview--card'}`}>
|
|
<div class="post-preview__date-box">
|
|
<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">
|
|
<h4 class="post-preview__title dark:text-theme-dark-primary">
|
|
<a href={`/blog/${slug}`} title={post.title}>{post.title}</a>
|
|
</h4>
|
|
<p class="post-preview__desc">
|
|
{post.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
.post-preview {
|
|
@apply flex gap-6;
|
|
}
|
|
.post-preview--card {
|
|
@apply flex flex-col-reverse gap-4 sm:w-72 md:w-60 lg:w-64;
|
|
}
|
|
.post-preview__date-box {
|
|
@apply sm:w-20 md:w-32
|
|
}
|
|
.post-preview--card .post-preview__date-box {
|
|
@apply w-full
|
|
}
|
|
.post-preview__date {
|
|
@apply flex flex-col w-full text-center;
|
|
}
|
|
.post-preview--card .post-preview__date {
|
|
@apply text-left flex flex-row gap-1
|
|
}
|
|
.post-preview__date__day {
|
|
@apply text-6xl font-semibold text-gray-500 dark:text-gray-300;
|
|
}
|
|
.post-preview--card .post-preview__date__day {
|
|
@apply text-4xl
|
|
}
|
|
.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 /* this doesn't works here */ hover:underline mb-2;
|
|
}
|
|
.post-preview__desc {
|
|
@apply text-lg leading-6 line-clamp-2 dark:text-white hyphens-auto;
|
|
}
|
|
</style>
|