Update src/components/player/SearchPlayer.tsx

src/components/player/SearchPlayer.tsx

@@ -1,90 +1,90 @@
-"use client";
+"use client";
-
+
-import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
+import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
-import { formatNumber } from "@/utils/number";
+import { formatNumber } from "@/utils/number";
-import { ScoreSaberAPI } from "@/utils/scoresaber/api";
+import { ScoreSaberAPI } from "@/utils/scoresaber/api";
-import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
+import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
-import clsx from "clsx";
+import clsx from "clsx";
-import { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
-import Avatar from "../Avatar";
+import Avatar from "../Avatar";
-
+
-export default function SearchPlayer() {
+export default function SearchPlayer() {
-  const [search, setSearch] = useState("");
+  const [search, setSearch] = useState("");
-  const [players, setPlayers] = useState([] as ScoresaberPlayer[]);
+  const [players, setPlayers] = useState([] as ScoresaberPlayer[]);
-
+
-  useEffect(() => {
+  useEffect(() => {
-    // Don't search if the query is too short
+    // Don't search if the query is too short
-    if (search.length < 4) {
+    if (search.length < 4) {
-      setPlayers([]); // Clear players
+      setPlayers([]); // Clear players
-      return;
+      return;
-    }
+    }
-    searchPlayer(search);
+    searchPlayer(search);
-  }, [search]);
+  }, [search]);
-
+
-  async function searchPlayer(search: string) {
+  async function searchPlayer(search: string) {
-    // Check if the search is a profile link
+    // Check if the search is a profile link
-    if (search.startsWith("https://scoresaber.com/u/")) {
+    if (search.startsWith("https://scoresaber.com/u/")) {
-      const id = search.split("/").pop();
+      const id = search.split("/").pop();
-      if (id == undefined) return;
+      if (id == undefined) return;
-
+
-      const player = await ScoreSaberAPI.fetchPlayerData(id);
+      const player = await ScoreSaberAPI.fetchPlayerData(id);
-      if (player == undefined) return;
+      if (player == undefined) return;
-
+
-      setPlayers([player]);
+      setPlayers([player]);
-    }
+    }
-
+
-    // Search by name
+    // Search by name
-    const players = await ScoreSaberAPI.searchByName(search);
+    const players = await ScoreSaberAPI.searchByName(search);
-    if (players == undefined) return;
+    if (players == undefined) return;
-
+
-    setPlayers(players);
+    setPlayers(players);
-  }
+  }
-
+
-  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
-    e.preventDefault();
+    e.preventDefault();
-
+
-    // Take the user to the first account
+    // Take the user to the first account
-    if (players.length > 0) {
+    if (players.length > 0) {
-      window.location.href = `/player/${players[0].id}`;
+      window.location.href = `/player/${players[0].id}/scoresaber/top/1`;
-    }
+    }
-  }
+  }
-
+
-  return (
+  return (
-    <form className="mt-6 flex gap-2" onSubmit={handleSubmit}>
+    <form className="mt-6 flex gap-2" onSubmit={handleSubmit}>
-      <input
+      <input
-        className="min-w-[14rem] border-b bg-transparent text-xs outline-none"
+        className="min-w-[14rem] border-b bg-transparent text-xs outline-none"
-        type="text"
+        type="text"
-        placeholder="Enter a name or ScoreSaber profile..."
+        placeholder="Enter a name or ScoreSaber profile..."
-        value={search}
+        value={search}
-        onChange={(e) => setSearch(e.target.value)}
+        onChange={(e) => setSearch(e.target.value)}
-      />
+      />
-      <button className="transform-gpu rounded-md bg-blue-600 p-1 transition-all hover:opacity-80">
+      <button className="transform-gpu rounded-md bg-blue-600 p-1 transition-all hover:opacity-80">
-        <MagnifyingGlassIcon className="font-black" width={18} height={18} />
+        <MagnifyingGlassIcon className="font-black" width={18} height={18} />
-      </button>
+      </button>
-
+
-      <div
+      <div
-        className={clsx(
+        className={clsx(
-          "absolute z-20 mt-7 flex max-h-[400px] min-w-[14rem] flex-col divide-y overflow-y-auto rounded-md bg-gray-700 shadow-sm",
+          "absolute z-20 mt-7 flex max-h-[400px] min-w-[14rem] flex-col divide-y overflow-y-auto rounded-md bg-gray-700 shadow-sm",
-          players.length > 0 ? "flex" : "hidden",
+          players.length > 0 ? "flex" : "hidden",
-        )}
+        )}
-      >
+      >
-        {players.map((player: ScoresaberPlayer) => (
+        {players.map((player: ScoresaberPlayer) => (
-          <a
+          <a
-            key={player.id}
+            key={player.id}
-            className="flex min-w-[14rem] items-center gap-2 rounded-md p-2 transition-all hover:bg-gray-600"
+            className="flex min-w-[14rem] items-center gap-2 rounded-md p-2 transition-all hover:bg-gray-600"
-            href={`/player/${player.id}`}
+            href={`/player/${player.id}`}
-          >
+          >
-            <Avatar label="Account" size={40} url={player.profilePicture} />
+            <Avatar label="Account" size={40} url={player.profilePicture} />
-
+
-            <div>
+            <div>
-              <p className="text-xs text-gray-400">
+              <p className="text-xs text-gray-400">
-                #{formatNumber(player.rank)}
+                #{formatNumber(player.rank)}
-              </p>
+              </p>
-              <p className="text-sm">{player.name}</p>
+              <p className="text-sm">{player.name}</p>
-            </div>
+            </div>
-          </a>
+          </a>
-        ))}
+        ))}
-      </div>
+      </div>
-    </form>
+    </form>
-  );
+  );
-}
+}