Rainnny/RESTfulMC
1
0
Fork 0
Code Issues 1 Pull Requests 10 Actions Wiki Activity

Add server recommendations
All checks were successful
Deploy Frontend / docker (17, 3.8.5) (push) Successful in 1m25s
Details

Browse Source
This commit is contained in:
Braydon 2024-04-22 00:46:47 -04:00
parent e50e6553c8
commit a33c1681bd
5 changed files with 100 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Frontend/public/media/platform/bedrock.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
Frontend/public/media/platform/java.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

60
Frontend/src/app/(pages)/server/[[...slug]]/page.tsx
View File

@ -16,6 +16,7 @@ import {
type RestfulMCAPIError,
ServerPlatform,
} from "restfulmc-lib";
import ServerRecommendations from "@/components/server/server-recommendations";
/**
* The page to lookup a server.
@ -43,38 +44,43 @@ const ServerPage = async ({ params }: PageProps): Promise<ReactElement> => {
// Render the page
return (
<main className="px-3 h-screen flex justify-center items-center">
<main className="px-3 h-screen flex flex-col gap-7 justify-center items-center">
<div className="flex flex-col gap-7">
<h1
className={cn(
"mt-20 text-6xl text-minecraft-green-3 text-center select-none pointer-events-none",
minecrafter.className
)}
>
Server Lookup
</h1>
{/* Header */}
<div className="relative flex flex-col gap-7">
<h1
className={cn(
"mt-20 text-6xl text-minecraft-green-3 text-center select-none pointer-events-none",
minecrafter.className
)}
>
Server Lookup
</h1>
<div className="flex flex-col gap-5 px-10 xs:px-14 sm:px-0 transition-all transform-gpu">
{/* Error */}
{error && (
<Alert variant="destructive">
<ExclamationCircleIcon width={20} height={20} />
<AlertTitle>Error</AlertTitle>
<AlertDescription>{error}</AlertDescription>
</Alert>
)}
<div className="flex flex-col gap-5 px-10 xs:px-14 sm:px-0 transition-all transform-gpu">
{/* Error */}
{error && (
<Alert variant="destructive">
<ExclamationCircleIcon width={20} height={20} />
<AlertTitle>Error</AlertTitle>
<AlertDescription>{error}</AlertDescription>
</Alert>
)}
{/* Search */}
<ServerSearch platform={platform} hostname={hostname} />
</div>
{/* Server Result */}
{result && (
<div className="flex justify-center scale-[.71] xs:scale-75 sm:scale-100 transition-all transform-gpu">
<ServerResult server={result} />
{/* Search */}
<ServerSearch platform={platform} hostname={hostname} />
</div>
)}
</div>
</div>
{/* Server Result & Recommendations */}
{result ? (
<div className="flex justify-center scale-[.71] xs:scale-75 sm:scale-100 transition-all transform-gpu">
<ServerResult server={result} />
</div>
) : (
<ServerRecommendations />
)}
</main>
);
};

66
Frontend/src/app/components/server/server-recommendations.tsx Normal file
View File

@ -0,0 +1,66 @@
import { ReactElement } from "react";
import { cn } from "@/lib";
import { minecrafter } from "@/font/fonts";
import { ServerPlatform } from "restfulmc-lib";
import { Button } from "@/components/ui/button";
import Image from "next/image";
import Link from "next/link";
/**
* The recommendations for a server.
*/
const RECOMMENDATIONS: {
[hostname: string]: ServerPlatform;
} = {
"hypixel.net": ServerPlatform.JAVA,
"cubecraft.net": ServerPlatform.JAVA,
"wildprison.net": ServerPlatform.JAVA,
"wildprison.bedrock.minehut.gg": ServerPlatform.BEDROCK,
"play.lbsg.net": ServerPlatform.BEDROCK,
};
/**
* The recommendations for
* a server to test.
*
* @return the recommendations jsx
*/
const ServerRecommendations = (): ReactElement => (
<div className="p-4 flex flex-col gap-2.5 items-center bg-muted rounded-xl">
{/* Header */}
<h1
className={cn(
"text-xl text-minecraft-green-3",
minecrafter.className
)}
>
Try A Server
</h1>
{/* Recommendations */}
<div className="max-w-2xl flex flex-wrap gap-2 justify-center">
{Object.entries(RECOMMENDATIONS).map(
(
[hostname, platform]: [string, ServerPlatform],
index: number
): ReactElement => (
<Link key={index} href={`/server/${platform}/${hostname}`}>
<Button
className="px-10 flex gap-2.5 font-semibold hover:opacity-85 transition-all transform-gpu"
variant="outline"
>
<Image
src={`/media/platform/${platform}.png`}
alt=""
width={26}
height={26}
/>
<span>{hostname}</span>
</Button>
</Link>
)
)}
</div>
</div>
);
export default ServerRecommendations;

2
Frontend/src/app/components/ui/button.tsx
View File

@ -14,7 +14,7 @@ const buttonVariants = cva(
destructive:
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline:
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
"border border-zinc-700 bg-transparent hover:text-accent-foreground",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",