aaaaa

src/lib/components/BlogCard.svelte

@@ -0,0 +1,72 @@
+<script>
+  import GlitchText from './GlitchText.svelte';
+  import CRTScreen from './CRTScreen.svelte';
+  import { formatDate } from '../utils/date.js';
+
+  export let post = {
+    slug: '',
+    title: '',
+    excerpt: '',
+    date: '',
+    author: ''
+  };
+</script>
+
+<CRTScreen class="blog-card">
+  <div class="card-content">
+    <h3 class="card-title">
+      <GlitchText text={post.title} size="1.2rem" />
+    </h3>
+    
+    <p class="card-excerpt">{post.excerpt}</p>
+    
+    <div class="card-meta">
+      <span class="card-date">{formatDate(post.date)}</span>
+      <span class="card-author">by {post.author}</span>
+    </div>
+    
+    <div class="card-actions">
+      <a href={`/blog/${post.slug}`} class="read-more">Читать →</a>
+    </div>
+  </div>
+</CRTScreen>
+
+<style>
+  .blog-card {
+    margin-bottom: 20px;
+    transition: transform 0.3s ease;
+  }
+
+  .blog-card:hover {
+    transform: translateY(-2px);
+  }
+
+  .card-title {
+    margin: 0 0 10px 0;
+    color: #33ff00;
+  }
+
+  .card-excerpt {
+    color: #ccc;
+    line-height: 1.4;
+    margin-bottom: 15px;
+  }
+
+  .card-meta {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.9rem;
+    color: #888;
+    margin-bottom: 15px;
+  }
+
+  .read-more {
+    color: #ff00ff;
+    text-decoration: none;
+    font-weight: bold;
+  }
+
+  .read-more:hover {
+    text-decoration: underline;
+  }
+</style>