1 files changed, 66 insertions, 0 deletions

diff --git a/frontend/src/components/Sidebar/Search.tsx b/frontend/src/components/Sidebar/Search.tsx
new file mode 100644
index 0000000..0c6b868
--- /dev/null
+++ b/frontend/src/components/Sidebar/Search.tsx
@@ -0,0 +1,66 @@
+import React, { useRef } from "react";
+import { Link } from "react-router-dom";
+
+import { Search } from "@customTypes/Search";
+import { API } from "@api/Api";
+import { UserProfile } from "@customTypes/Profile";
+
+interface SearchProps {
+    profile?: UserProfile;
+    isSearching: boolean;
+};
+
+const _Search: React.FC<SearchProps> = ({ profile, isSearching }) => {
+    const [searchData, setSearchData] = React.useState<Search | undefined>(
+        undefined
+    );
+
+    const searchbarRef = useRef<HTMLInputElement>(null);
+
+    const _handle_search_change = async (q: string) => {
+        const searchResponse = await API.get_search(q);
+        setSearchData(searchResponse);
+    };
+    return (
+        <div className="flex w-full flex-col justify-between p-3">
+            <input
+                ref={searchbarRef}
+                type="text"
+                id="searchbar"
+                placeholder="Search for map or a player..."
+                onChange={e => _handle_search_change(e.target.value)}
+                className="w-full py-2 px-[19px] bg-input rounded-[2000px] outline-none placeholder-bright placeholder:text-[18px] placeholder:font-barlow-semicondensed-regular"
+            />
+
+            {searchData && (
+                <div className="overflow-y-auto">
+                    {searchData?.maps.map((q, index) => (
+                        <Link to={`/maps/${q.id}`} className="block p-2 mb-1 bg-surface1 rounded hover:bg-surface2 transition-colors min-w-0" key={index}>
+                            <span className="block text-xs text-subtext1 truncate">{q.game}</span>
+                            <span className="block text-xs text-subtext1 truncate">{q.chapter}</span>
+                            <span className="block text-sm text-foreground truncate">{q.map}</span>
+                        </Link>
+                    ))}
+                    {searchData?.players.map((q, index) => (
+                        <Link
+                            to={
+                                profile && q.steam_id === profile.steam_id
+                                    ? `/profile`
+                                    : `/users/${q.steam_id}`
+                            }
+                            className="flex items-center p-2 mb-1 bg-surface1 rounded hover:bg-surface2 transition-colors min-w-0"
+                            key={index}
+                        >
+                            <img src={q.avatar_link} alt="pfp" className="w-6 h-6 rounded-full mr-2 flex-shrink-0" />
+                            <span className="text-sm text-foreground truncate">
+                                {q.user_name}
+                            </span>
+                        </Link>
+                    ))}
+                </div>
+            )}
+        </div>
+    )
+}
+
+export default _Search;