first commit

frontend/src/components/blog/PopularPosts.astro

@@ -0,0 +1,35 @@
+---
+interface Props {
+    posts: any[]; // Массив статей из PocketBase
+}
+
+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>