cleanup

src/app/(pages)/layout.tsx

@@ -1,13 +1,13 @@
 import { Fonts } from "@/common/fonts";
-import Container from "@/components/container";
-import ThemeProvider from "@/components/theme-provider";
 import { Metadata, Viewport } from "next";
 import { ToastContainer } from "react-toastify";
 
 import "react-toastify/dist/ReactToastify.css";
 import "./globals.css";
 
-import Config from "../../config.json";
+import Config from "../../../config.json";
+import Container from "../components/container";
+import ThemeProvider from "../components/theme-provider";
 
 export const viewport: Viewport = {
   themeColor: "#3498DB",

src/app/(pages)/page.tsx

@@ -6,7 +6,7 @@ type Button = {
 };
 
 const buttons: Button[] = [
-  { title: "Get Started", url: "/player" },
+  { title: "Get Started", url: "/player/Notch" },
   { title: "Documentation", url: "https://api.mcutils.xyz/swagger-ui.html" },
 ];
 

src/app/(pages)/player/[id]/page.tsx

@@ -1,7 +1,7 @@
+import { NotFound } from "@/app/components/not-found";
+import { LookupPlayer } from "@/app/components/player/lookup-player";
+import { Card } from "@/app/components/ui/card";
 import { generateEmbed } from "@/common/embed";
-import { LookupPlayer } from "@/components/lookup-player";
-import { NotFound } from "@/components/not-found";
-import { Card } from "@/components/ui/card";
 import { getPlayer } from "mcutils-library";
 import { Player } from "mcutils-library/dist/types/player/player";
 import { Metadata } from "next";

src/app/(pages)/server/[platform]/[hostname]/page.tsx

@@ -1,8 +1,8 @@
+import { NotFound } from "@/app/components/not-found";
+import { LookupServer } from "@/app/components/server/lookup-server";
+import { Card } from "@/app/components/ui/card";
 import { generateEmbed } from "@/common/embed";
 import { capitalizeFirstLetter } from "@/common/string-utils";
-import { LookupServer } from "@/components/lookup-server";
-import { NotFound } from "@/components/not-found";
-import { Card } from "@/components/ui/card";
 import { getServer } from "mcutils-library";
 import JavaMinecraftServer from "mcutils-library/dist/types/server/javaServer";
 import { ServerPlatform } from "mcutils-library/dist/types/server/platform";

src/app/components/container.tsx

@@ -0,0 +1,14 @@
+import NavBar from "./navbar";
+
+export default function Container({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <div className="z-[9999] m-auto flex h-screen min-h-full flex-col items-center opacity-90 md:max-w-[1200px]">
+      <NavBar />
+      <div className="w-full flex-1 p-4">{children}</div>
+    </div>
+  );
+}

src/app/components/logo.tsx

@@ -0,0 +1,13 @@
+import Image from "next/image";
+
+export default function Logo({ size = 30 }: Readonly<{ size?: number }>) {
+  return (
+    <Image
+      src="https://git.fascinated.cc/MinecraftUtilities/Assets/raw/branch/master/logo.png"
+      alt={"The Logo"}
+      width={size}
+      height={size}
+      className={`w-[${size}px] h-[${size}px]`}
+    />
+  );
+}

src/app/components/navbar.tsx

@@ -0,0 +1,34 @@
+import Link from "next/link";
+import Logo from "./logo";
+
+type Page = {
+  title: string;
+  url: string;
+};
+
+const pages: Page[] = [
+  { title: "Player", url: "/player/Notch" },
+  { title: "Server", url: "/server/java/hypixel.net" },
+];
+
+export default function NavBar() {
+  return (
+    <div className="bg-secondary w-full rounded-lg flex items-center gap-3 mt-2 bg-opacity-85">
+      <div className="flex items-center gap-2 pl-3 pr-3">
+        <Logo />
+        <Link href="/" className="hidden md:block">
+          <p>Minecraft Utilities</p>
+        </Link>
+      </div>
+      {pages.map((page, index) => {
+        return (
+          <div key={index} className="pt-4 pb-4 w-fit rounded-lg">
+            <Link href={page.url}>
+              <p className="hover:text-primary transition-all">{page.title}</p>
+            </Link>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

src/app/components/not-found.tsx

@@ -0,0 +1,12 @@
+type NotFoundProps = {
+  message: string;
+};
+
+export function NotFound({ message }: NotFoundProps) {
+  return (
+    <div className="flex flex-col justify-center text-center">
+      <h1 className="text-xl text-red-400">Not Found</h1>
+      <p>{message}</p>
+    </div>
+  );
+}

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

@@ -0,0 +1,37 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+
+export function LookupPlayer() {
+  const router = useRouter();
+  const [player, setPlayer] = useState("");
+
+  /**
+   * Set the player value
+   *
+   * @param event the input event
+   */
+  const setPlayerValue = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setPlayer(event.target.value);
+  };
+
+  /**
+   * Lookup a player
+   */
+  const lookupPlayer = () => {
+    if (!player || player.length === 0) {
+      return;
+    }
+    router.push(`/player/${player}`);
+  };
+
+  return (
+    <div className="flex gap-2 justify-center mt-2">
+      <Input className="w-fit" placeholder="Player UUID / Username" value={player} onChange={setPlayerValue} />
+      <Button onClick={() => lookupPlayer()}>Lookup</Button>
+    </div>
+  );
+}

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

@@ -0,0 +1,41 @@
+"use client";
+
+import { ServerPlatform } from "mcutils-library/dist/types/server/platform";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+
+export function LookupServer() {
+  const router = useRouter();
+  const [hostname, setHostname] = useState("");
+
+  /**
+   * Set the hostname value
+   *
+   * @param event the input event
+   */
+  const setHostnameValue = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setHostname(event.target.value);
+  };
+
+  /**
+   * Lookup a server based on the platform
+   *
+   * @param platform the server platform
+   */
+  const lookupServer = (platform: ServerPlatform) => {
+    if (!hostname || hostname.length === 0) {
+      return;
+    }
+    router.push(`/server/${platform}/${hostname}`);
+  };
+
+  return (
+    <div className="flex gap-2 justify-center mt-2">
+      <Input className="w-fit" placeholder="Server hostname" value={hostname} onChange={setHostnameValue} />
+      <Button onClick={() => lookupServer(ServerPlatform.Java)}>Java</Button>
+      <Button onClick={() => lookupServer(ServerPlatform.Bedrock)}>Bedrock</Button>
+    </div>
+  );
+}

src/app/components/theme-provider.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { type ThemeProviderProps } from "next-themes/dist/types";
+
+export default function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}

src/app/components/ui/button.tsx

@@ -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 };

src/app/components/ui/card.tsx

@@ -0,0 +1,7 @@
+export function Card({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return <div className="bg-secondary rounded-lg p-4">{children}</div>;
+}

src/app/components/ui/input.tsx

@@ -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 };