Новые компоенты

frontend/src/components/blog/SearchIcon.astro

@@ -0,0 +1,55 @@
+---
+// Компонент иконки поиска (лупа)
+---
+
+<button class="search-icon-btn" id="search-icon-btn" data-modal-target="search-modal" aria-label="Поиск статей">
+  <svg width="24" height="24" 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>
+
+<script>
+  (function() {
+    const btn = document.getElementById('search-icon-btn');
+    
+    btn?.addEventListener('click', () => {
+      window.dispatchEvent(new CustomEvent('open-modal', { 
+        detail: 'search-modal' 
+      }));
+    });
+  })();
+</script>
+
+<style>
+  .search-icon-btn {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: #ffffff;
+    padding: 0.75rem;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .search-icon-btn:hover {
+    background: rgba(255, 255, 255, 0.15);
+    border-color: rgba(234, 194, 110, 0.5);
+    color: #eac26e;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(234, 194, 110, 0.2);
+  }
+
+  .search-icon-btn:active {
+    transform: translateY(0);
+  }
+
+  @media (max-width: 768px) {
+    .search-icon-btn {
+      padding: 0.6rem;
+    }
+  }
+</style>