From a33c1681bd8b2470890d2780dece3fad4f46355a Mon Sep 17 00:00:00 2001
From: Rainnny7 <braydonrainnny@gmail.com>
Date: Mon, 22 Apr 2024 00:46:47 -0400
Subject: [PATCH] Add server recommendations

---
 Frontend/public/media/platform/bedrock.png    | Bin 0 -> 2305 bytes
 Frontend/public/media/platform/java.png       | Bin 0 -> 2978 bytes
 .../app/(pages)/server/[[...slug]]/page.tsx   |  60 +++++++++-------
 .../server/server-recommendations.tsx         |  66 ++++++++++++++++++
 Frontend/src/app/components/ui/button.tsx     |   2 +-
 5 files changed, 100 insertions(+), 28 deletions(-)
 create mode 100644 Frontend/public/media/platform/bedrock.png
 create mode 100644 Frontend/public/media/platform/java.png
 create mode 100644 Frontend/src/app/components/server/server-recommendations.tsx

diff --git a/Frontend/public/media/platform/bedrock.png b/Frontend/public/media/platform/bedrock.png
new file mode 100644
index 0000000000000000000000000000000000000000..4b4feb8398f17eecfb57e4b63f76babc728a1640
GIT binary patch
literal 2305
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
bgtP+yLJfN)mno(k00000NkvXXu0mjfK4mq6

literal 0
HcmV?d00001

diff --git a/Frontend/public/media/platform/java.png b/Frontend/public/media/platform/java.png
new file mode 100644
index 0000000000000000000000000000000000000000..3036471e73429eec2ed4c1904d5aa9f2fc38e7fc
GIT binary patch
literal 2978
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

literal 0
HcmV?d00001

diff --git a/Frontend/src/app/(pages)/server/[[...slug]]/page.tsx b/Frontend/src/app/(pages)/server/[[...slug]]/page.tsx
index 20dfafd..1498623 100644
--- a/Frontend/src/app/(pages)/server/[[...slug]]/page.tsx
+++ b/Frontend/src/app/(pages)/server/[[...slug]]/page.tsx
@@ -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>
     );
 };
diff --git a/Frontend/src/app/components/server/server-recommendations.tsx b/Frontend/src/app/components/server/server-recommendations.tsx
new file mode 100644
index 0000000..f61c2e5
--- /dev/null
+++ b/Frontend/src/app/components/server/server-recommendations.tsx
@@ -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;
diff --git a/Frontend/src/app/components/ui/button.tsx b/Frontend/src/app/components/ui/button.tsx
index 7bf9602..43b2c3c 100644
--- a/Frontend/src/app/components/ui/button.tsx
+++ b/Frontend/src/app/components/ui/button.tsx
@@ -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",