add lookup player input

src/app/player/[id]/page.tsx

@@ -1,4 +1,5 @@
 import { generateEmbed } from "@/common/embed";
+import { LookupPlayer } from "@/components/lookup-player";
 import { NotFound } from "@/components/not-found";
 import { Card } from "@/components/ui/card";
 import { getPlayer } from "mcutils-library";
@@ -49,6 +50,8 @@ export default async function Page({ params }: Params) {
       <div className="mb-4 text-center">
         <h1 className="text-xl">Lookup a Player</h1>
         <p>You can enter a players uuid or username to get information about the player.</p>
+
+        <LookupPlayer />
       </div>
 
       <Card>

src/components/lookup-player.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+
+export function LookupPlayer() {
+  const router = useRouter();
+  const [player, setPlayer] = useState("");
+
+  /**
+   * Set the player value
+   *
+   * @param event the input event
+   */
+  const setPlayerValue = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setPlayer(event.target.value);
+  };
+
+  /**
+   * Lookup a player
+   */
+  const lookupPlayer = () => {
+    if (!player || player.length === 0) {
+      return;
+    }
+    router.push(`/player/${player}`);
+  };
+
+  return (
+    <div className="flex gap-2 justify-center mt-2">
+      <Input className="w-fit" placeholder="Player UUID / Username" value={player} onChange={setPlayerValue} />
+      <Button onClick={() => lookupPlayer()}>Lookup</Button>
+    </div>
+  );
+}