updated search look for player and server page

src/app/(pages)/server/[platform]/[[...hostname]]/page.tsx

@@ -116,7 +116,7 @@ export default async function Page({ params: { platform, hostname } }: Params):
         <h1 className="text-xl">Lookup a {invalidPlatform ? "" : capitalizeFirstLetter(platform)} Server</h1>
         <p>You can enter a server hostname to get information about the server.</p>
 
-        <LookupServer />
+        <LookupServer currentPlatform={capitalizeFirstLetter(platform)} />
       </div>
 
       {error && <ErrorCard message={error} />}

src/app/components/code-dialog.tsx

@@ -1,6 +1,6 @@
 import { ReactElement } from "react";
 import SyntaxHighlighter from "react-syntax-highlighter";
-import { atomOneDarkReasonable } from "react-syntax-highlighter/dist/esm/styles/hljs";
+import { atelierSeasideDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";
 
 type CodeDialogProps = {
@@ -21,7 +21,7 @@ export function CodeDialog({ title, description, code, children }: CodeDialogPro
         </DialogHeader>
         <SyntaxHighlighter
           language="javascript"
-          style={atomOneDarkReasonable}
+          style={atelierSeasideDark}
           customStyle={{
             maxHeight: "600px",
           }}

src/app/components/copy-button.tsx

@@ -24,7 +24,11 @@ export function CopyButton({ content, children }: CopyButtonProps): ReactElement
         await copy(content);
         toast({
           title: "Copied!",
-          description: `Copied "${content}" to the clipboard.`,
+          description: (
+            <p>
+              Copied <span className="font-semibold">{content}</span> to your clipboard
+            </p>
+          ),
           duration: 5000,
         });
       }}

src/app/components/navbar.tsx

@@ -27,9 +27,11 @@ export default function NavBar(): ReactElement {
 
       <div className="flex-grow"></div>
 
-      {pages.map((page, index) => {
-        return <RedirectButton key={index} title={page.title} url={page.url} openInNewTab={page.openInNewTab} />;
-      })}
+      <div className="flex gap-4">
+        {pages.map((page, index) => {
+          return <RedirectButton key={index} title={page.title} url={page.url} openInNewTab={page.openInNewTab} />;
+        })}
+      </div>
 
       <div className="flex-grow"></div>
 

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>
   );
 }

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>
   );
 }

src/app/components/ui/label.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/common/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

src/app/components/ui/select.tsx

@@ -0,0 +1,160 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/common/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}