fix autocomplete filling in fields

This commit is contained in:
Lee 2024-04-19 22:32:11 +01:00
parent 1ed0e72316
commit 3be59f97c3
7 changed files with 44 additions and 25 deletions

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

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

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

@ -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">
<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>
<PlayerSkin player={player} />
</div>
</div>
</Card>

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

@ -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 = {
/**

@ -1,13 +1,13 @@
"use client"
"use client";
import * as React from "react"
import * as PopoverPrimitive from "@radix-ui/react-popover"
import * as React from "react";
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 };