updated search look for player and server page

src/app/components/player/lookup-player.tsx

@@ -3,26 +3,28 @@
 import { useToast } from "@/common/use-toast";
 import { getPlayer } from "mcutils-library";
 import { useRouter } from "next/navigation";
-import { ReactElement, useState } from "react";
+import { ReactElement } from "react";
 import { Button } from "../ui/button";
 import { Input } from "../ui/input";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import { Label } from "../ui/label";
 
 export function LookupPlayer(): ReactElement {
   const router = useRouter();
   const { toast } = useToast();
-  const [id, setId] = useState("");
 
   /**
-   * Lookup a player
+   * Lookup a server based on the platform
+   *
+   * @param platform the server platform
+   * @param query the query to lookup
    */
-  const lookupPlayer = async () => {
-    if (!id || id.length === 0) {
+  const lookupPlayer = async (query: string) => {
+    if (!query || query.length === 0) {
       return;
     }
 
     try {
-      await getPlayer(id);
+      await getPlayer(query);
     } catch (err) {
       toast({
         title: "Error",
@@ -33,32 +35,24 @@ export function LookupPlayer(): ReactElement {
       return;
     }
 
-    router.push(`/player/${id}`);
+    router.push(`/player/${query}`);
   };
 
   return (
-    <form className="flex gap-2 justify-center mt-2" action="" onSubmit={event => event.preventDefault()}>
-      <Input
-        className="w-fit"
-        type="search"
-        name="query"
-        placeholder="Name / UUID"
-        value={id}
-        onChange={event => {
-          setId(event.target.value);
-        }}
-        maxLength={36}
-      />
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button type="submit" onClick={() => lookupPlayer()}>
-            Lookup
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>
-          <p>Click to lookup the player</p>
-        </TooltipContent>
-      </Tooltip>
+    <form
+      className="flex flex-col gap-2 justify-center items-center mt-4"
+      action={(form: FormData) => {
+        lookupPlayer(form.get("query") as string);
+      }}
+    >
+      <div className="flex gap-2 justify-center">
+        <div className="flex flex-col gap-2 items-start">
+          <Label htmlFor="query">Player</Label>
+          <Input className="w-fit" type="search" name="query" placeholder="Query..." maxLength={128} />
+        </div>
+      </div>
+
+      <Button type="submit">Search</Button>
     </form>
   );
 }