Initial commit

skills/frontend-component/examples/SearchBar.tsx

@@ -0,0 +1,52 @@
+/**
+ * SearchBar - Search input with debounced onChange
+ *
+ * @example
+ * <SearchBar
+ *   onSearch={(query) => console.log('Search:', query)}
+ *   placeholder="Search users..."
+ * />
+ */
+
+import React, { useState, useEffect, useCallback } from 'react';
+import styles from './SearchBar.module.css';
+
+interface SearchBarProps {
+  onSearch: (query: string) => void;
+  placeholder?: string;
+  debounceMs?: number;
+  className?: string;
+}
+
+export const SearchBar: React.FC<SearchBarProps> = ({
+  onSearch,
+  placeholder = 'Search...',
+  debounceMs = 300,
+  className,
+}) => {
+  const [query, setQuery] = useState('');
+
+  const handleSearch = useCallback(() => {
+    if (query.trim()) {
+      onSearch(query);
+    }
+  }, [query, onSearch]);
+
+  useEffect(() => {
+    const timer = setTimeout(handleSearch, debounceMs);
+    return () => clearTimeout(timer);
+  }, [query, debounceMs, handleSearch]);
+
+  return (
+    <div className={`${styles.container} ${className || ''}`}>
+      <input
+        type="text"
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+        placeholder={placeholder}
+        className={styles.input}
+        aria-label="Search"
+      />
+    </div>
+  );
+};