Merge pull request #53 from Srijoy2007/feature/search-ui

Added responsive searchbar with debounce integration in components/Ho…

Author: reckless-sherixx

frontend/src/components/Homepage/search/SearchBar.tsx

@@ -0,0 +1,119 @@
+
+import { useState } from "react";
+import { Search, X } from "lucide-react";
+import { useSearch } from "./useSearch";
+import type { SearchItemData } from "./types";
+import SearchItem from "./SearchItem";
+
+interface Props {
+  onSearch: (query: string) => Promise<SearchItemData[]>;
+}
+
+export default function SearchBar({ onSearch }: Props) {
+  const [open, setOpen] = useState(false);
+
+  const [recent, setRecent] = useState<SearchItemData[]>([
+    { id: 1, name: "Mayra S.", meta: "128k Followers" },
+    { id: 2, name: "Vihan Singh", meta: "112k Followers" },
+  ]);
+
+  const { query, setQuery, results, loading } = useSearch(onSearch);
+
+  const handleSelect = (item: SearchItemData) => {
+    setRecent((prev) =>
+      [item, ...prev.filter((i) => i.id !== item.id)].slice(0, 5)
+    );
+    setOpen(false);
+    setQuery("");
+  };
+
+  return (
+    <div className="relative w-full max-w-lg">
+      <div
+        onClick={() => setOpen(true)}
+        className="flex items-center gap-2 px-4 py-2.5 rounded-xl
+                   bg-[#0b1330] border border-white/10
+                   focus-within:ring-2 focus-within:ring-blue-500/70
+                   transition"
+      >
+        <Search className="w-4 h-4 text-white/60" />
+
+        <input
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder="Search for something..."
+          className="flex-1 bg-transparent outline-none
+                     text-sm text-white placeholder-white/50"
+        />
+
+        {query && (
+          <button
+            type="button"
+            onClick={() => setQuery("")}
+            className="text-white/50 hover:text-white transition"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        )}
+      </div>
+      {open && (
+        <div
+          className="absolute z-50 mt-2 w-full rounded-2xl
+                     bg-[#0a1130] border border-white/10
+                     shadow-2xl overflow-hidden"
+        >
+          <div
+            className="flex items-center justify-between px-4 py-3
+                       border-b border-white/10"
+          >
+            <span className="text-xs font-medium text-white/70">
+              {query ? "Search results" : "Recent"}
+            </span>
+
+            {!query && recent.length > 0 && (
+              <button
+                type="button"
+                onClick={() => setRecent([])}
+                className="text-white/40 hover:text-white transition"
+                title="Clear all"
+              >
+                <X className="w-4 h-4" />
+              </button>
+            )}
+          </div>
+          <div className="p-2 max-h-72 overflow-y-auto">
+            {loading && (
+              <p className="text-center text-xs text-white/50 py-4">
+                Searching…
+              </p>
+            )}
+
+            {!loading && query && results.length === 0 && (
+              <p className="text-center text-xs text-white/40 py-4">
+                No results found
+              </p>
+            )}
+
+            {!query &&
+              recent.map((item) => (
+                <SearchItem
+                  key={item.id}
+                  item={item}
+                  onSelect={handleSelect}
+                />
+              ))}
+
+            {query &&
+              results.map((item) => (
+                <SearchItem
+                  key={item.id}
+                  item={item}
+                  onSelect={handleSelect}
+                />
+              ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+ }

frontend/src/components/Homepage/search/SearchItem.tsx

@@ -0,0 +1,36 @@
+
+import { X } from "lucide-react";
+import type { SearchItemData } from "./types";
+
+interface Props {
+  item: SearchItemData;
+  onSelect: (item: SearchItemData) => void;
+}
+
+export default function SearchItem({ item, onSelect }: Props) {
+  return (
+    <button
+      type="button"
+      onClick={() => onSelect(item)}
+      className="group w-full flex items-center gap-3 px-3 py-2 rounded-lg
+                 text-left transition
+                 hover:bg-white/5 active:bg-white/10"
+    >
+      <div
+        className="w-9 h-9 shrink-0 rounded-full
+                   bg-gradient-to-br from-blue-500/30 to-purple-500/30
+                   flex items-center justify-center
+                   text-sm font-semibold text-white"
+      >
+        {item.name[0]}
+      </div>
+      <div className="flex-1 min-w-0">
+        <p className="text-sm text-white truncate">{item.name}</p>
+        {item.meta && (
+          <p className="text-xs text-white/60 truncate">{item.meta}</p>
+        )}
+      </div>
+      <X className="w-4 h-4 text-white/20 group-hover:text-white/40 transition" />
+    </button>
+  );
+}

frontend/src/components/Homepage/search/types.ts

@@ -0,0 +1,5 @@
+export interface SearchItemData {
+  id: string | number;
+  name: string;
+  meta?: string;
+}

frontend/src/components/Homepage/search/useSearch.ts

@@ -0,0 +1,40 @@
+
+import { useEffect, useState } from "react";
+import type {SearchItemData} from "./types.ts";
+export function useSearch(
+  searchFn: (query: string) => Promise<SearchItemData[]>,
+  delay = 300
+) {
+  const [query, setQuery] = useState<string>("");
+  const [results, setResults] = useState<SearchItemData[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (!query.trim()) {
+      setResults([]);
+      return;
+    }
+
+    const timer = setTimeout(async () => {
+      setLoading(true);
+      try {
+        const data = await searchFn(query);
+        setResults(data ?? []);
+      } catch (err) {
+        console.error("Search failed:", err);
+        setResults([]);
+      } finally {
+        setLoading(false);
+      }
+    }, delay);
+
+    return () => clearTimeout(timer);
+  }, [query, searchFn, delay]);
+
+  return {
+    query,
+    setQuery,
+    results,
+    loading,
+  };
+}