"use client"; import { ScoresaberPlayer } from "@/schemas/scoresaber/player"; import { formatNumber } from "@/utils/number"; import { getPlayerInfo, searchByName } from "@/utils/scoresaber/api"; import { MagnifyingGlassIcon } from "@heroicons/react/20/solid"; import clsx from "clsx"; import { useEffect, useState } from "react"; import Avatar from "./Avatar"; export default function SearchPlayer() { const [search, setSearch] = useState(""); const [players, setPlayers] = useState([] as ScoresaberPlayer[]); useEffect(() => { // Don't search if the query is too short if (search.length < 4) { setPlayers([]); // Clear players return; } searchPlayer(search); }, [search]); async function searchPlayer(search: string) { // Check if the search is a profile link if (search.startsWith("https://scoresaber.com/u/")) { const id = search.split("/").pop(); if (id == undefined) return; const player = await getPlayerInfo(id); if (player == undefined) return; setPlayers([player]); } // Search by name const players = await searchByName(search); if (players == undefined) return; setPlayers(players); } function handleSubmit(e: React.FormEvent) { e.preventDefault(); // Take the user to the first account if (players.length > 0) { window.location.href = `/player/${players[0].id}`; } } return (
setSearch(e.target.value)} />
0 ? "flex" : "hidden", )} > {players.map((player: ScoresaberPlayer) => (

#{formatNumber(player.rank)}

{player.name}

))}
); }