fix autocomplete filling in fields

src/app/components/navbar.tsx

@@ -51,7 +51,7 @@ export default function NavBar(): ReactElement {
       </div>
 
       {/* Links */}
-      <div className="absolute inset-x-0 flex justify-start ml-16 lg:ml-0 lg:justify-center xs:justify-center">
+      <div className="absolute inset-x-0 flex justify-center">
         <div className="flex gap-4">
           {pages.map((page, index) => {
             const isActive = path.includes(page.url);

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

@@ -49,13 +49,14 @@ export function LookupPlayer({ currentPlayer }: PlayerLookupProps): ReactElement
         description: (err as Error).message,
         duration: 5000,
       });
-      return setLoading(false);
+      setLoading(false);
     }
   };
 
   return (
     <form
       className="flex flex-col gap-2 justify-center items-center mt-4 flex-wrap"
+      autoComplete="off"
       action={(form: FormData) => {
         lookupPlayer(form.get("query") as string);
       }}

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

@@ -0,0 +1,27 @@
+import { CachedPlayer, SkinPart } from "mcutils-library";
+import { ReactElement } from "react";
+import { SkinPartImage } from "@/app/components/player/skin-part-image";
+
+type PlayerSkinProps = {
+  /**
+   * The player to get the skin from.
+   */
+  player: CachedPlayer;
+};
+
+export function PlayerSkin({ player }: PlayerSkinProps): ReactElement {
+  const skin = player.skin;
+
+  return (
+    <div className="flex flex-col gap-2">
+      <p className="text-lg">Skin Parts</p>
+      <div className="flex gap-2">
+        {Object.entries(skin.parts)
+          .filter(([part]) => part !== SkinPart.HEAD) // Don't show the head part again
+          .map(([part, url]) => {
+            return <SkinPartImage key={part} playerName={player.username} part={part as SkinPart} url={url} />;
+          })}
+      </div>
+    </div>
+  );
+}

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

@@ -7,6 +7,7 @@ import { Button } from "../ui/button";
 import { Separator } from "../ui/separator";
 import { SkinPartImage } from "./skin-part-image";
 import { CacheInformation } from "@/app/components/cache-information";
+import { PlayerSkin } from "@/app/components/player/player-skin";
 
 type PlayerViewProps = {
   /**
@@ -32,16 +33,7 @@ export function PlayerView({ player }: PlayerViewProps): ReactElement {
 
             <Separator />
 
-            <div className="flex flex-col gap-2">
+            <PlayerSkin player={player} />
-              <p className="text-lg">Skin Parts</p>
-              <div className="flex gap-2">
-                {Object.entries(player.skin.parts)
-                  .filter(([part]) => part !== SkinPart.HEAD) // Don't show the head part again
-                  .map(([part, url]) => {
-                    return <SkinPartImage key={part} playerName={player.username} part={part as SkinPart} url={url} />;
-                  })}
-              </div>
-            </div>
           </div>
         </div>
       </Card>

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

@@ -57,13 +57,14 @@ export function LookupServer({ currentPlatform, currentServer }: LookupServerPro
         description: (err as Error).message,
         duration: 5000,
       });
-      return setLoading(false);
+      setLoading(false);
     }
   };
 
   return (
     <form
       className="flex flex-col gap-2 justify-center items-center mt-4"
+      autoComplete="off"
       action={(form: FormData) => {
         lookupServer(form.get("platform") as ServerPlatform, form.get("query") as string);
       }}

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

@@ -1,14 +1,12 @@
 import { CachedBedrockMinecraftServer, CachedJavaMinecraftServer } from "mcutils-library";
 import Image from "next/image";
 import { ReactElement } from "react";
-import { Card } from "../card";
 import { CodeDialog } from "../code-dialog";
 import { Button } from "../ui/button";
 import config from "@root/config.json";
 import { cn } from "@/common/utils";
 import { minecraft } from "@/app/font/fonts";
 import { CacheInformation } from "@/app/components/cache-information";
-import { Cache } from "mcutils-library";
 
 type ServerViewProps = {
   /**

src/app/components/ui/popover.tsx

@@ -1,13 +1,13 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as PopoverPrimitive from "@radix-ui/react-popover";
 
-import { cn } from "@/common/utils"
+import { cn } from "@/common/utils";
 
-const Popover = PopoverPrimitive.Root
+const Popover = PopoverPrimitive.Root;
 
-const PopoverTrigger = PopoverPrimitive.Trigger
+const PopoverTrigger = PopoverPrimitive.Trigger;
 
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
@@ -20,12 +20,12 @@ const PopoverContent = React.forwardRef<
       sideOffset={sideOffset}
       className={cn(
         "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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",
-        className
+        className,
       )}
       {...props}
     />
   </PopoverPrimitive.Portal>
-))
+));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent }
+export { Popover, PopoverTrigger, PopoverContent };