From 0cc34aa0073e1d28d17f83dc826d092f7f0d30a9 Mon Sep 17 00:00:00 2001
From: Damjan Savic <info@damjan-savic.com>
Date: Sun, 25 Jan 2026 02:37:31 +0100
Subject: [PATCH] auto-claude: subtask-1-1 - Create SearchBar component with
 search input and r

---
 src/components/blog/SearchBar.tsx | 50 +++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 src/components/blog/SearchBar.tsx

diff --git a/src/components/blog/SearchBar.tsx b/src/components/blog/SearchBar.tsx
new file mode 100644
index 0000000..4bc3520
--- /dev/null
+++ b/src/components/blog/SearchBar.tsx
@@ -0,0 +1,50 @@
+'use client';
+
+import { Search, X } from 'lucide-react';
+import { motion } from 'framer-motion';
+
+interface SearchBarProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+}
+
+export function SearchBar({
+  value,
+  onChange,
+  placeholder = 'Search posts...',
+  className = ''
+}: SearchBarProps) {
+  const handleClear = () => {
+    onChange('');
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      className={`relative ${className}`}
+    >
+      <div className="relative">
+        <Search className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-zinc-400" />
+        <input
+          type="text"
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={placeholder}
+          className="w-full pl-12 pr-12 py-3 bg-zinc-900/50 border border-zinc-800 rounded-lg text-white placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-[#697565] focus:border-transparent transition-all"
+        />
+        {value && (
+          <button
+            onClick={handleClear}
+            className="absolute right-4 top-1/2 -translate-y-1/2 text-zinc-400 hover:text-white transition-colors"
+            aria-label="Clear search"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        )}
+      </div>
+    </motion.div>
+  );
+}