Создан компонент поста

frontend/src/components/blog/RelatedPosts.astro

@@ -0,0 +1,91 @@
+---
+import BlogCard from '@components/blog/BlogCard.astro';
+
+interface CollectionEntry {
+  id: string;
+  data: {
+    title: string;
+    description: string;
+    category: string;
+    categoryColor: string;
+    date: Date;
+    readTime: string;
+    imageUrl: string;
+  };
+}
+
+interface Props {
+  posts: CollectionEntry[];
+  currentSlug?: string;
+}
+
+const { posts, currentSlug } = Astro.props;
+
+// Форматируем дату
+const formatDate = (date: Date) => {
+  return date.toLocaleDateString('ru-RU', {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric'
+  });
+};
+
+// Фильтруем текущую статью
+const filteredPosts = currentSlug 
+  ? posts.filter(post => post.id !== currentSlug).slice(0, 3)
+  : posts.slice(0, 3);
+---
+
+<section class="related-posts">
+  <h3 class="section-title">Читайте также</h3>
+
+  <div class="related-grid">
+    {filteredPosts.map((post) => (
+      <BlogCard
+        title={post.data.title}
+        description={post.data.description}
+        category={post.data.category}
+        categoryColor={post.data.categoryColor}
+        date={formatDate(post.data.date)}
+        readTime={post.data.readTime}
+        imageUrl={post.data.imageUrl}
+        slug={`/blog/${post.id}`}
+      />
+    ))}
+  </div>
+</section>
+
+<style is:global>
+  .related-posts {
+    margin-top: 3rem;
+    padding-top: 2rem;
+    border-top: 2px solid #f1f5f9;
+  }
+
+  .section-title {
+    color: #1e293b;
+    font-size: clamp(1.5rem, 3vw, 2rem);
+    font-weight: 800;
+    margin: 0 0 2rem;
+    letter-spacing: -0.02em;
+  }
+
+  .related-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 2rem;
+  }
+
+  @media (max-width: 1024px) {
+    .related-grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media (max-width: 768px) {
+    .related-grid {
+      grid-template-columns: 1fr;
+      gap: 1.5rem;
+    }
+  }
+</style>