From a79e37878117b7124deff2ee58c48d34da801372 Mon Sep 17 00:00:00 2001
From: arsam <me@asabbagh.com>
Date: Fri, 18 Sep 2026 23:17:53 +0330
Subject: [PATCH] Import source: vault/components/search-bar

Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
---
 vault/components/search-bar.tsx | 34 +++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 vault/components/search-bar.tsx

diff --git a/vault/components/search-bar.tsx b/vault/components/search-bar.tsx
new file mode 100644
index 0000000..5b9043e
--- /dev/null
+++ b/vault/components/search-bar.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import { Search, X } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+
+interface SearchBarProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export function SearchBar({ value, onChange }: SearchBarProps) {
+  return (
+    <div className="relative">
+      <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+      <Input
+        placeholder="Search snippets..."
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="pl-9 pr-9 h-10 bg-muted/50 border-border/50 focus:border-primary/50"
+      />
+      {value && (
+        <Button
+          variant="ghost"
+          size="icon"
+          className="absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7"
+          onClick={() => onChange("")}
+        >
+          <X className="h-3.5 w-3.5" />
+        </Button>
+      )}
+    </div>
+  );
+}