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

59 lines
1.5 KiB
TypeScript
Raw Normal View History

2024-04-16 19:03:11 +01:00
"use client";
import { useToast } from "@/common/use-toast";
import { getPlayer } from "mcutils-library";
2024-04-16 19:03:11 +01:00
import { useRouter } from "next/navigation";
import { ReactElement } from "react";
2024-04-16 19:12:26 +01:00
import { Button } from "../ui/button";
import { Input } from "../ui/input";
import { Label } from "../ui/label";
2024-04-16 19:03:11 +01:00
2024-04-18 03:51:41 +01:00
export function LookupPlayer(): ReactElement {
2024-04-16 19:03:11 +01:00
const router = useRouter();
const { toast } = useToast();
2024-04-16 19:03:11 +01:00
/**
* Lookup a server based on the platform
*
* @param platform the server platform
* @param query the query to lookup
2024-04-16 19:03:11 +01:00
*/
const lookupPlayer = async (query: string) => {
if (!query || query.length === 0) {
2024-04-16 19:03:11 +01:00
return;
}
try {
await getPlayer(query);
} catch (err) {
toast({
title: "Error",
variant: "destructive",
description: (err as Error).message,
duration: 5000,
});
return;
}
router.push(`/player/${query}`);
2024-04-16 19:03:11 +01:00
};
return (
<form
2024-04-18 05:48:13 +01:00
className="flex flex-col gap-2 justify-center items-center mt-4 flex-wrap"
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>
2024-04-16 19:35:07 +01:00
</form>
2024-04-16 19:03:11 +01:00
);
}