WIP: Améliorations UX et corrections de bugs avant création des épiques

keep-notes/components/settings/SettingsSearch.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import { useState } from 'react'
+import { Search } from 'lucide-react'
+import { Input } from '@/components/ui/input'
+import { cn } from '@/lib/utils'
+
+interface SettingsSearchProps {
+  onSearch: (query: string) => void
+  placeholder?: string
+  className?: string
+}
+
+export function SettingsSearch({
+  onSearch,
+  placeholder = 'Search settings...',
+  className
+}: SettingsSearchProps) {
+  const [query, setQuery] = useState('')
+
+  const handleChange = (value: string) => {
+    setQuery(value)
+    onSearch(value)
+  }
+
+  return (
+    <div className={cn('relative', className)}>
+      <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
+      <Input
+        type="text"
+        value={query}
+        onChange={(e) => handleChange(e.target.value)}
+        placeholder={placeholder}
+        className="pl-10"
+      />
+    </div>
+  )
+}