Ayush/leaderboard search

components/leaderboard/RankCard.tsx

@@ -52,6 +52,7 @@ const RankCard: FunctionComponent<RankCardProps> = ({
           width="32"
           color={iconMap[position as keyof typeof iconMap]}
         />
+
       </div>
 
       <div className={styles.rank_card_naming}>

components/leaderboard/searchbar.tsx

@@ -1,29 +1,106 @@
-import React, { FunctionComponent } from "react";
+import React, {
+  useContext,
+  useEffect,
+  useState,
+  FunctionComponent,
+} from "react";
 import SearchIcon from "../../public/icons/searchIcon.svg";
 import Image from "next/image";
+import styles from "../../styles/leaderboard.module.css";
+import CrossIcon from "../../public/icons/cross.svg";
+import { StarknetIdJsContext } from "../../context/StarknetIdJsProvider";
+import { hexToDecimal } from "../../utils/feltService";
 
 type SearchbarProps = {
-  handleSearch: (_: string) => void;
+  handleChange: (_: string) => void;
   value: string;
   onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+  suggestions: string[];
+  handleSuggestionClick: (_: string) => void;
 };
 
 const Searchbar: FunctionComponent<SearchbarProps> = ({
-  handleSearch,
+  handleChange,
   value,
   onKeyDown,
+  suggestions,
+  handleSuggestionClick,
 }) => {
+  const [showSuggestions, setShowSuggestions] = useState(
+    suggestions?.length > 0
+  );
+
+  const { starknetIdNavigator } = useContext(StarknetIdJsContext);
+
+  useEffect(() => {
+    const handleOutsideClick = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      if (
+        target.className !== styles.search_bar_container &&
+        target.className !== styles.search_bar &&
+        target.className !== styles.search_bar_suggestions
+      ) {
+        setShowSuggestions(false);
+      } else {
+        setShowSuggestions(true);
+      }
+    };
+
+    document.addEventListener("click", handleOutsideClick);
+
+    return () => {
+      document.removeEventListener("click", handleOutsideClick);
+    };
+  }, []);
+
+  const handleOptionClick = async (option: string) => {
+    const addr = await starknetIdNavigator
+      ?.getAddressFromStarkName(option)
+      .catch((err) => {
+        return "";
+      });
+    if (!addr) return;
+    handleChange(option);
+    handleSuggestionClick(hexToDecimal(addr));
+  };
+
   return (
-    <div className="flex flex-row p-2 bg-background w-full rounded-lg">
-      <Image src={SearchIcon} priority width={16} height={16} />
-      <input
-        value={value}
-        onChange={(e) => handleSearch(e.target.value)}
-        className="bg-transparent outline-none ml-2 w-full"
-        placeholder="Search"
-        style={{ fontSize: 14 }}
-        onKeyDown={onKeyDown}
-      />
+    <div className="relative gap-2 z-50">
+      <div className={styles.search_bar_container}>
+        <Image src={SearchIcon} priority width={16} height={16} />
+        <input
+          value={value}
+          onChange={(e) => handleChange(e.target.value)}
+          className={styles.search_bar}
+          placeholder="Search"
+          style={{ fontSize: 14 }}
+          onKeyDown={onKeyDown}
+        />
+        {value.length > 0 ? (
+          <div
+            className="flex cursor-pointer"
+            onClick={() => {
+              handleChange("");
+              handleSuggestionClick("");
+            }}
+          >
+            <Image src={CrossIcon} priority width={20} height={20} />
+          </div>
+        ) : null}
+      </div>
+      {showSuggestions && suggestions?.length > 0 ? (
+        <div className={styles.search_bar_suggestions}>
+          {suggestions.map((suggestion, index) => (
+            <div
+              className="flex cursor-pointer"
+              key={index}
+              onClick={() => handleOptionClick(suggestion)}
+            >
+              <p>{suggestion}</p>
+            </div>
+          ))}
+        </div>
+      ) : null}
     </div>
   );
 };

hooks/useDebounce.tsx

@@ -0,0 +1,15 @@
+import { useEffect, useState } from "react";
+
+export function useDebounce<T>(value: T, delay?: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}