MinecraftUtilities/Frontend
1
1
Fork 0
Code Issues 1 Pull Requests 10 Actions Activity

add basic player page
Some checks failed
Deploy App / docker (ubuntu-latest) (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Lee
2024-04-14 19:55:07 +01:00
parent 89c534ac86
commit 8203b10b71
12 changed files with 308 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/layout.tsx
View File

@ -1,7 +1,9 @@
import Container from "@/components/container";
import ThemeProvider from "@/components/theme-provider";
import { Inter } from "next/font/google";
import { ToastContainer } from "react-toastify";
import { Inter } from "next/font/google";
import "react-toastify/dist/ReactToastify.css";
import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
@ -17,6 +19,7 @@ export default function RootLayout({
<head />
<body>
<ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
<ToastContainer theme="dark" />
<Container>{children}</Container>
</ThemeProvider>
</body>

13
src/app/page.tsx
View File

@ -13,12 +13,15 @@ const buttons: Button[] = [
export default function Home() {
return (
<div className="text-center flex flex-col justify-center">
<h1 className="text-4xl">Minecraft Utilities</h1>
<p className="text-lg">
We provide a convenient API for Minecraft, simplifying the usage for players and developers.
</p>
<h1 className="text-4xl mb-1">Minecraft Utilities</h1>
<div className="text-lg">
<p>Minecraft Utilities offers you many endpoints to get information about a minecraft server or a player.</p>
<p>
You can use this information on your minecraft server or website. We offer you a simple and easy to use API.
</p>
</div>
<div className="mt-4 flex flex-row gap-2 justify-center">
<div className="mt-6 flex flex-row gap-2 justify-center">
{buttons.map((button, index) => {
return (
<Link

13
src/app/player/page.tsx Normal file
View File

@ -0,0 +1,13 @@
import PlayerSearch from "@/components/player-search";
export default function Player() {
return (
<div className="h-full flex flex-col items-center">
<div className="mb-4 text-center">
<h1 className="text-xl">Search for a Player</h1>
<p>You can enter a players uuid or username to get information about the player.</p>
</div>
<PlayerSearch />
</div>
);
}

0
src/lib/utils.ts → src/common/utils.ts
View File

18
src/common/web-request.ts Normal file
View File

@ -0,0 +1,18 @@
import { API_ENDPOINT } from "@/consts";
import axios from "axios";
export default class WebRequest {
private API_ENDPOINT: string = API_ENDPOINT;
/**
* Gets a response from the server
*
* @param endpoint the endpoint to send the request to
* @returns the response from the server
*/
public static get(endpoint: string) {
return axios.get(API_ENDPOINT + endpoint, {
validateStatus: () => true, // Do not throw an error on non-200 status codes
});
}
}

77
src/components/player-search.tsx Normal file
View File

@ -0,0 +1,77 @@
"use client";
import WebRequest from "@/common/web-request";
import Image from "next/image";
import Link from "next/link";
import { useState } from "react";
import { toast } from "react-toastify";
import { Button } from "./ui/button";
import { Input } from "./ui/input";
export default function PlayerSearch() {
const [playerId, setPlayerId] = useState<string | null>(null);
const [player, setPlayer] = useState<any | null>(null);
const handleSearch = () => {
if (playerId === null || playerId.length <= 0) {
toast.error("Please enter a player ID");
return;
}
searchPlayer(playerId);
};
/**
* Searches for a player by their id
*
* @param playerId the player's id
*/
const searchPlayer = async (playerId: string) => {
const response = await WebRequest.get("/player/" + playerId);
if (response.status !== 200) {
toast.error("Player not found");
return;
}
const { cache, player } = response.data;
setPlayer(player);
console.log(player);
};
return (
<div className="flex flex-col items-center gap-8">
<div className="flex items-center gap-2">
<Input className="w-[200px]" placeholder="Player ID" onChange={(e) => setPlayerId(e.target.value)} />
<Button onClick={() => handleSearch()}>Search</Button>
</div>
{player && (
<div className="bg-secondary rounded-lg p-2 min-w-[600px] max-w-full">
<div className="flex gap-4 p-2">
<Image src={player.skin.parts.head} alt="The player's Head" width={150} height={150} />
<div className="flex flex-col gap-1 mt-2">
<p>
Unique ID: <span className="font-bold">{player.uniqueId}</span>
</p>
<p>
Name: <span className="font-bold">{player.username}</span>
</p>
<div className="mt-2">
<p>Skin Parts</p>
<div className="flex gap-2">
{Object.keys(player.skin.parts).map((part: any, index: number) => {
return (
<p key={index}>
<Link className="text-primary" href={player.skin.parts[part]} target="_blank">
{part}
</Link>
</p>
);
})}
</div>
</div>
</div>
</div>
</div>
)}
</div>
);
}

47
src/components/ui/button.tsx Normal file
View File

@ -0,0 +1,47 @@
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";
import { cn } from "@/common/utils";
const buttonVariants = cva(
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default: "h-10 px-4 py-2",
sm: "h-9 rounded-md px-3",
lg: "h-11 rounded-md px-8",
icon: "h-10 w-10",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
);
export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
asChild?: boolean;
}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button";
return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
}
);
Button.displayName = "Button";
export { Button, buttonVariants };

22
src/components/ui/input.tsx Normal file
View File

@ -0,0 +1,22 @@
import * as React from "react";
import { cn } from "@/common/utils";
export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
return (
<input
type={type}
className={cn(
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
)}
ref={ref}
{...props}
/>
);
});
Input.displayName = "Input";
export { Input };

1
src/consts.ts Normal file
View File

@ -0,0 +1 @@
export const API_ENDPOINT = "https://api.mcutils.xyz";