100 lines
2.5 KiB
Text
100 lines
2.5 KiB
Text
---
|
|
import type { CollectionEntry } from 'astro:content'
|
|
import { formatDate, readingTime } from '@lib/utils'
|
|
import { Image } from 'astro:assets'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { Separator } from '@/components/ui/separator'
|
|
import Link from './Link.astro'
|
|
import { getEntry } from 'astro:content'
|
|
|
|
type Props = {
|
|
entry: CollectionEntry<'blog'>
|
|
}
|
|
|
|
const { entry } = Astro.props as {
|
|
entry: CollectionEntry<'blog'>
|
|
}
|
|
|
|
const formattedDate = formatDate(entry.data.date)
|
|
const readTime = readingTime(entry.body)
|
|
|
|
let author = null
|
|
if (
|
|
entry.data.author &&
|
|
typeof entry.data.author === 'object' &&
|
|
'collection' in entry.data.author
|
|
) {
|
|
author = await getEntry(entry.data.author)
|
|
} else if (typeof entry.data.author === 'string') {
|
|
author = {
|
|
data: {
|
|
name: entry.data.author,
|
|
avatar: '/favicons/android-chrome-512x512.png',
|
|
},
|
|
}
|
|
}
|
|
---
|
|
|
|
<div
|
|
class="not-prose rounded-xl border p-4 transition-colors duration-300 ease-in-out hover:bg-secondary/50"
|
|
>
|
|
<Link
|
|
href={`/${entry.collection}/${entry.slug}`}
|
|
class="flex flex-wrap gap-4"
|
|
>
|
|
{
|
|
entry.data.image && (
|
|
<div class="flex-shrink-0">
|
|
<Image
|
|
src={entry.data.image}
|
|
alt={entry.data.title}
|
|
width={200}
|
|
height={200}
|
|
class="rounded-xl object-cover"
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
<div class="flex-grow">
|
|
<h3 class="mb-1 text-lg font-semibold">
|
|
{entry.data.title}
|
|
</h3>
|
|
<p class="mb-2 text-sm text-muted-foreground">
|
|
{entry.data.description}
|
|
</p>
|
|
<div
|
|
class="mb-2 flex items-center space-x-2 text-xs text-muted-foreground"
|
|
>
|
|
{
|
|
author && (
|
|
<>
|
|
<div class="flex items-center gap-1.5">
|
|
<Image
|
|
src={author.data.avatar}
|
|
alt={author.data.name}
|
|
width={18}
|
|
height={18}
|
|
class="rounded-full"
|
|
/>
|
|
<span>{author.data.name}</span>
|
|
</div>
|
|
<Separator orientation="vertical" className="h-4" />
|
|
</>
|
|
)
|
|
}
|
|
<span>{formattedDate}</span>
|
|
<Separator orientation="vertical" className="h-4" />
|
|
<span>{readTime}</span>
|
|
</div>
|
|
{
|
|
entry.data.tags && (
|
|
<div class="flex flex-wrap gap-2">
|
|
{entry.data.tags.map((tag) => (
|
|
<Badge variant="secondary">{tag}</Badge>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
</div>
|
|
</Link>
|
|
</div>
|