use the new server preview

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

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

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

@@ -3,9 +3,6 @@ import Image from "next/image";
 import { ReactElement } from "react";
 import { CodeDialog } from "../code-dialog";
 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";
 
 type ServerViewProps = {
@@ -23,35 +20,14 @@ type ServerViewProps = {
 export function ServerView({ server, favicon }: ServerViewProps): ReactElement {
   return (
     <div className="flex relative flex-col gap-2 items-center w-screen">
-      <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 */}
+      <div>
         <Image
-          src={favicon || `${config.apiEndpoint}/server/icon/fallback`}
-          alt={`${server.hostname}'s Favicon`}
-          width={64}
-          height={64}
+          src={`https://api.mcutils.xyz/server/java/preview/${server.hostname}`}
+          alt={"The server preview"}
+          width={650}
+          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 className="flex gap-2 flex-wrap justify-center">
         <CodeDialog

src/app/font/fonts.ts

@@ -1,16 +1,6 @@
 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.
  */
 export const inter = Inter({ subsets: ["latin"] });
-
-/**
- * The Minecraft font to use for the site.
- */
-export const minecraft: NextFont = localFont({
-  src: "../font/Minecraft.otf",
-});