From 1d40c9b5d38ac025b70213517c1b83159474704a Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Tue, 16 Apr 2024 19:03:11 +0100
Subject: [PATCH] add lookup player input

---
 src/app/player/[id]/page.tsx     |  3 +++
 src/components/lookup-player.tsx | 37 ++++++++++++++++++++++++++++++++
 2 files changed, 40 insertions(+)
 create mode 100644 src/components/lookup-player.tsx

diff --git a/src/app/player/[id]/page.tsx b/src/app/player/[id]/page.tsx
index 6cf1f54..fb644ff 100644
--- a/src/app/player/[id]/page.tsx
+++ b/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>
diff --git a/src/components/lookup-player.tsx b/src/components/lookup-player.tsx
new file mode 100644
index 0000000..80cad90
--- /dev/null
+++ b/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>
+  );
+}