2026-03-29 17:24:16 +05:00
|
|
|
---
|
|
|
|
|
interface Props {
|
2026-05-06 23:16:07 +05:00
|
|
|
posts: any[];
|
2026-03-29 17:24:16 +05:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const { posts } = Astro.props;
|
|
|
|
|
if (!posts || posts.length === 0) return null;
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
<div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
|
|
|
|
|
<div class="flex items-center justify-between mb-5">
|
|
|
|
|
<h3 class="text-lg font-bold text-gray-800">Meistgelesen</h3>
|
|
|
|
|
<span class="w-2 h-2 rounded-full bg-blue-500 animate-pulse"></span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="space-y-4">
|
|
|
|
|
{posts.slice(0, 3).map((post, index) => (
|
|
|
|
|
<a href={`/blog/${post.slug}`} class="group flex gap-4 items-start">
|
|
|
|
|
<!-- Номер (или миниатюра) -->
|
|
|
|
|
<div class="flex-shrink-0 w-8 h-8 flex items-center justify-center rounded-lg bg-gray-50 text-gray-400 font-bold text-sm group-hover:bg-blue-50 group-hover:text-blue-600 transition-colors">
|
|
|
|
|
{index + 1}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<h4 class="text-sm font-semibold text-gray-700 leading-snug group-hover:text-blue-600 transition-colors line-clamp-2">
|
|
|
|
|
{post.title}
|
|
|
|
|
</h4>
|
|
|
|
|
<p class="text-xs text-gray-400 mt-1">
|
|
|
|
|
{new Date(post.date).toLocaleDateString('de-DE')}
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</a>
|
|
|
|
|
))}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
