updated search look for player and server page

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

@@ -1,40 +1,35 @@
 "use client";
 
-import { capitalizeFirstLetter } from "@/common/string-utils";
 import { useToast } from "@/common/use-toast";
 import { ServerPlatform, getServer } 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";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 
-export function LookupServer(): ReactElement {
+type LookupServerProps = {
+  currentPlatform: string;
+};
+
+export function LookupServer({ currentPlatform }: LookupServerProps): ReactElement {
   const router = useRouter();
   const { toast } = useToast();
-  const [hostname, setHostname] = useState("");
-
-  /**
-   * Set the hostname value
-   *
-   * @param event the input event
-   */
-  const setHostnameValue = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setHostname(event.target.value);
-  };
 
   /**
    * Lookup a server based on the platform
    *
    * @param platform the server platform
+   * @param query the query to lookup
    */
-  const lookupServer = async (platform: ServerPlatform) => {
-    if (!hostname || hostname.length === 0) {
+  const lookupServer = async (platform: ServerPlatform, query: string) => {
+    if (!query || query.length === 0) {
       return;
     }
 
     try {
-      await getServer(platform, hostname);
+      await getServer(platform, query);
     } catch (err) {
       toast({
         title: "Error",
@@ -45,44 +40,37 @@ export function LookupServer(): ReactElement {
       return;
     }
 
-    router.push(`/server/${platform}/${hostname}`);
-  };
-
-  const LookupButton = ({ platform }: { platform: ServerPlatform }): ReactElement => {
-    const name = capitalizeFirstLetter(platform);
-    return (
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button type="submit" onClick={() => lookupServer(platform)}>
-            {name}
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>
-          <p>Click to lookup the server as a {name} server</p>
-        </TooltipContent>
-      </Tooltip>
-    );
+    router.push(`/server/${platform}/${query}`);
   };
 
   return (
     <form
-      className="flex gap-2 justify-center items-center mt-2 flex-col xs:flex-row"
-      action=""
-      onSubmit={event => event.preventDefault()}
+      className="flex flex-col gap-2 justify-center items-center mt-4"
+      action={(form: FormData) => {
+        lookupServer(form.get("platform") as ServerPlatform, form.get("query") as string);
+      }}
     >
-      <Input
-        className="w-fit"
-        type="search"
-        name="query"
-        placeholder="Hostname"
-        value={hostname}
-        onChange={setHostnameValue}
-        maxLength={128}
-      />
       <div className="flex gap-2 justify-center">
-        <LookupButton platform={ServerPlatform.Java} />
-        <LookupButton platform={ServerPlatform.Bedrock} />
+        <div className="flex flex-col gap-2 items-start">
+          <Label>Platform</Label>
+          <Select name="platform">
+            <SelectTrigger className="w-[180px]">
+              <SelectValue placeholder={currentPlatform} />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value={ServerPlatform.Java}>Java</SelectItem>
+              <SelectItem value={ServerPlatform.Bedrock}>Bedrock</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="flex flex-col gap-2 items-start">
+          <Label htmlFor="query">Hostname</Label>
+          <Input className="w-fit" type="search" name="query" placeholder="Query..." maxLength={128} />
+        </div>
       </div>
+
+      <Button type="submit">Search</Button>
     </form>
   );
 }