57 lines
2.0 KiB
Plaintext
57 lines
2.0 KiB
Plaintext
---
|
|
import { getMonthName } from '$/utils'
|
|
import { USE_MEDIA_THUMBNAIL } from '$/config'
|
|
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 ${USE_MEDIA_THUMBNAIL && post.thumbnail ? 'flex flex-row gap-4' : ''}`}>
|
|
{ USE_MEDIA_THUMBNAIL && post.thumbnail && <img class="post-preview__media" src= {post.thumbnail} alt="media thumbnail" />}
|
|
<div class="flex flex-col mb-2">
|
|
<h4 class="post-preview__title dark:text-theme-dark-primary">
|
|
<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.length > 0 && `${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 /* this doesn't works here */ hover:underline
|
|
}
|
|
.post-preview__desc {
|
|
@apply text-lg leading-6 dark:text-white line-clamp-2 hyphens-auto
|
|
}
|
|
.post-preview__media {
|
|
@apply w-48 rounded-md shadow-lg shadow-theme-accent-gray-light dark:shadow-theme-accent-gray-dark
|
|
}
|
|
</style>
|