Создана форма поиска

frontend/src/components/blog/BlogCategories.astro

@@ -7,16 +7,27 @@ export interface Props {
 const { categories, activeCategory = 'Все' } = Astro.props;
 ---
 
-<div class="blog-categories animate-on-scroll" data-animation="fade-up">
-  <div class="categories-wrapper">
-    {categories.map((cat) => (
-      <button
-        class={`category-btn ${cat === activeCategory ? 'active' : ''}`}
-        data-category={cat}
-      >
-        {cat}
+<div class="blog-categories">
+  <div class="site-container">
+    <div class="categories-inner animate-on-scroll" data-animation="fade-up">
+      <div class="categories-wrapper">
+        {categories.map((cat) => (
+          <button
+            class={`category-btn ${cat === activeCategory ? 'active' : ''}`}
+            data-category={cat}
+          >
+            {cat}
+          </button>
+        ))}
+      </div>
+
+      <button class="search-icon-btn" id="search-icon-btn" data-modal-target="search-modal" aria-label="Поиск статей">
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="11" cy="11" r="8"></circle>
+          <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+        </svg>
       </button>
-    ))}
+    </div>
   </div>
 </div>
 
@@ -26,13 +37,38 @@ const { categories, activeCategory = 'Все' } = Astro.props;
     background: #f8fafc;
   }
 
-  .categories-wrapper {
+  .categories-inner {
     display: flex;
-    flex-wrap: wrap;
-    gap: 0.75rem;
+    align-items: center;
     justify-content: center;
-    max-width: 900px;
-    margin: 0 auto;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+  }
+
+  .categories-wrapper {
+    display: contents;
+  }
+
+  .search-icon-btn {
+    background: #ffffff;
+    border: 2px solid #e2e8f0;
+    color: #64748b;
+    width: 42px;
+    height: 42px;
+    border-radius: 2rem;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .search-icon-btn:hover {
+    border-color: #d4af37;
+    color: #d4af37;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
   }
 
   .category-btn {
@@ -87,6 +123,10 @@ const { categories, activeCategory = 'Все' } = Astro.props;
   }
 
   @media (max-width: 640px) {
+    .categories-inner {
+      flex-wrap: wrap;
+    }
+
     .categories-wrapper {
       gap: 0.5rem;
     }
@@ -99,29 +139,54 @@ const { categories, activeCategory = 'Все' } = Astro.props;
 </style>
 
 <script>
-  // Клиентская логика фильтрации (пока заглушка)
-  document.addEventListener('DOMContentLoaded', () => {
+  // Клиентская логика фильтрации
+  document.addEventListener('DOMContentLoaded', initFilter);
+  document.addEventListener('astro:page-load', initFilter);
+
+  function initFilter() {
     const buttons = document.querySelectorAll('.category-btn');
+    const cards = document.querySelectorAll('.blog-card-wrapper');
 
     buttons.forEach(btn => {
       btn.addEventListener('click', () => {
+        const category = btn.getAttribute('data-category');
+
+        // Обновляем активную кнопку
         buttons.forEach(b => b.classList.remove('active'));
         btn.classList.add('active');
 
-        // TODO: Добавить логику фильтрации при интеграции с коллекцией
-        console.log('Выбрана категория:', btn.getAttribute('data-category'));
+        // Фильтрация карточек
+        cards.forEach(card => {
+          const cardCategory = card.getAttribute('data-category');
+
+          if (category === 'Все' || cardCategory === category) {
+            card.style.display = '';
+            card.style.opacity = '0';
+            card.style.transform = 'translateY(20px)';
+
+            requestAnimationFrame(() => {
+              card.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
+              card.style.opacity = '1';
+              card.style.transform = 'translateY(0)';
+            });
+          } else {
+            card.style.opacity = '0';
+            card.style.transform = 'translateY(20px)';
+
+            setTimeout(() => {
+              card.style.display = 'none';
+            }, 300);
+          }
+        });
       });
     });
-  });
 
-  document.addEventListener('astro:page-load', () => {
-    const buttons = document.querySelectorAll('.category-btn');
-
-    buttons.forEach(btn => {
-      btn.addEventListener('click', () => {
-        buttons.forEach(b => b.classList.remove('active'));
-        btn.classList.add('active');
-      });
+    // Открытие поиска
+    const searchBtn = document.getElementById('search-icon-btn');
+    searchBtn?.addEventListener('click', () => {
+      window.dispatchEvent(new CustomEvent('open-modal', {
+        detail: 'search-modal'
+      }));
     });
-  });
+  }
 </script>