use the new server preview
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m33s

This commit is contained in:
Lee 2024-04-20 21:26:27 +01:00
parent fcba215522
commit 325fe62569
4 changed files with 6 additions and 41 deletions

@ -24,7 +24,6 @@ export function LookupPlayer({ currentPlayer }: PlayerLookupProps): ReactElement
/** /**
* Lookup a server based on the platform * Lookup a server based on the platform
* *
* @param platform the server platform
* @param query the query to lookup * @param query the query to lookup
*/ */
const lookupPlayer = async (query: string) => { const lookupPlayer = async (query: string) => {

@ -3,9 +3,6 @@ import Image from "next/image";
import { ReactElement } from "react"; import { ReactElement } from "react";
import { CodeDialog } from "../code-dialog"; import { CodeDialog } from "../code-dialog";
import { Button } from "../ui/button"; import { Button } from "../ui/button";
import config from "@root/config.json";
import { cn } from "@/app/common/utils";
import { minecraft } from "@/app/font/fonts";
import { CacheInformation } from "@/app/components/cache-information"; import { CacheInformation } from "@/app/components/cache-information";
type ServerViewProps = { type ServerViewProps = {
@ -23,35 +20,14 @@ type ServerViewProps = {
export function ServerView({ server, favicon }: ServerViewProps): ReactElement { export function ServerView({ server, favicon }: ServerViewProps): ReactElement {
return ( return (
<div className="flex relative flex-col gap-2 items-center w-screen"> <div className="flex relative flex-col gap-2 items-center w-screen">
<div <div>
className={cn(
"w-[29rem] relative p-2 flex gap-2 rounded-lg pointer-events-none scale-75 xs:scale-100",
'bg-[url("/media/server-background.png")]',
)}
>
{/* Favicon */}
<Image <Image
src={favicon || `${config.apiEndpoint}/server/icon/fallback`} src={`https://api.mcutils.xyz/server/java/preview/${server.hostname}`}
alt={`${server.hostname}'s Favicon`} alt={"The server preview"}
width={64} width={650}
height={64} height={256}
unoptimized
/> />
{/* Name & MOTD */}
<div className={cn("flex flex-col leading-[1.3rem]", minecraft.className)}>
<h1>{server.hostname}</h1>
{server.motd.html.map((line: string, index: number): ReactElement => {
return <p key={index} className="pointer-events-auto" dangerouslySetInnerHTML={{ __html: line }}></p>;
})}
</div>
{/* Ping */}
<div className={cn("absolute top-0.5 right-0.5 flex items-center", minecraft.className)}>
<p>
{server.players.online}/{server.players.max}
</p>
<Image src="/media/full-ping.png" alt="Ping!" width={28} height={28} />
</div>
</div> </div>
<div className="flex gap-2 flex-wrap justify-center"> <div className="flex gap-2 flex-wrap justify-center">
<CodeDialog <CodeDialog

Binary file not shown.

@ -1,16 +1,6 @@
import { Inter } from "next/font/google"; import { Inter } from "next/font/google";
import localFont from "next/font/local";
import { NextFont } from "next/dist/compiled/@next/font";
/** /**
* The default font to use for the site. * The default font to use for the site.
*/ */
export const inter = Inter({ subsets: ["latin"] }); export const inter = Inter({ subsets: ["latin"] });
/**
* The Minecraft font to use for the site.
*/
export const minecraft: NextFont = localFont({
src: "../font/Minecraft.otf",
});