Cleanup and center the links in the navbar
Some checks failed
Deploy Frontend / docker (17, 3.8.5) (push) Has been cancelled

This commit is contained in:
Braydon 2024-04-19 10:54:56 -04:00
parent 4bccec1f5d
commit 1244b6d142
9 changed files with 103 additions and 84 deletions

@ -5,6 +5,7 @@ import Link from "next/link";
import { ReactElement } from "react";
import {
getMojangServerStatus,
MojangServer,
MojangServerStatus,
MojangServerStatusResponse,
} from "restfulmc-lib";
@ -46,42 +47,44 @@ const MojangStatusPage = async (): Promise<ReactElement> => {
{/* Server Statuses */}
<div className="w-[25rem] xs:w-[29rem] sm:w-[33.5rem] px-5 py-3.5 flex flex-col gap-2.5 bg-muted rounded-xl divide-y-2 divide-zinc-700/40 transition-all transform-gpu">
{servers.map((server, index) => {
const status: MojangServerStatus = server.status; // The status of the server
return (
<div
key={index}
className={cn(
"flex justify-between items-center",
index > 0 && "pt-2"
)}
>
<div className="flex flex-col gap-0.5">
<h1 className="pointer-events-none">
{server.name}
</h1>
<Link
href={server.endpoint}
className="text-xs text-minecraft-green-3 hover:opacity-85 transition-all transform-gpu"
rel="noopener noreferrer"
target="_blank"
>
<code>{server.endpoint}</code>
</Link>
</div>
{/* Status */}
<h2
{servers.map(
(server: MojangServer, index: number): ReactElement => {
const status: MojangServerStatus = server.status; // The status of the server
return (
<div
key={index}
className={cn(
"font-semibold pointer-events-none",
statusStyles[status]
"flex justify-between items-center",
index > 0 && "pt-2"
)}
>
{status}
</h2>
</div>
);
})}
<div className="flex flex-col gap-0.5">
<h1 className="pointer-events-none">
{server.name}
</h1>
<Link
href={server.endpoint}
className="text-xs text-minecraft-green-3 hover:opacity-85 transition-all transform-gpu"
rel="noopener noreferrer"
target="_blank"
>
<code>{server.endpoint}</code>
</Link>
</div>
{/* Status */}
<h2
className={cn(
"font-semibold pointer-events-none",
statusStyles[status]
)}
>
{status}
</h2>
</div>
);
}
)}
</div>
</main>
);
@ -90,7 +93,9 @@ const MojangStatusPage = async (): Promise<ReactElement> => {
/**
* The styles for each status.
*/
const statusStyles: any = {
const statusStyles: {
[status: string]: string;
} = {
ONLINE: "text-green-500",
DEGRADED: "text-yellow-500",
OFFLINE: "text-red-500",

@ -2,7 +2,7 @@ import FeaturedContent from "@/components/landing/featured-content";
import Hero from "@/components/landing/hero";
import StatisticCounters from "@/components/landing/statistic-counters";
import { ReactElement } from "react";
import HeroBackground from "../components/landing/background";
import HeroBackground from "@/components/landing/background";
/**
* The landing page.

@ -12,6 +12,7 @@ type EmbedProps = {
/**
* The color of this embed, undefined
* for no custom color.
* // TODO: make this work lol
*/
color?: string | undefined;
@ -52,7 +53,6 @@ const Embed = ({
twitter: {
card: "summary",
},
themeColor: color,
};
};
export default Embed;

@ -6,6 +6,11 @@ import { minecrafter } from "@/font/fonts";
import { cn } from "@/lib/utils";
import { FooterLinks } from "@/types/config";
/**
* The footer for the site.
*
* @returns the footer jsx
*/
const Footer = (): ReactElement => (
<footer
className={cn(

@ -22,7 +22,7 @@ import {
const GitHubStarButton = (): ReactElement => {
const [stars, setStars]: [
number | undefined,
Dispatch<SetStateAction<number | undefined>>
Dispatch<SetStateAction<number | undefined>>,
] = useState<number | undefined>(undefined); // The stars of the repository
useEffect(() => {

@ -17,13 +17,12 @@ import { ReactElement } from "react";
const Navbar = (): ReactElement => {
const path: string = usePathname(); // Get the current path
return (
<nav className="fixed inset-x-0 flex h-16 px-5 sm:px-12 justify-center sm:justify-between items-center bg-navbar-background z-50">
{/* Left */}
<div className="flex gap-3 xs:gap-7 lg:gap-12 items-center transition-all transform-gpu">
{/* App Branding */}
<nav className="fixed inset-x-0 flex h-16 px-2.5 xs:px-5 sm:px-12 bg-navbar-background transition-all transform-gpu z-50">
<div className="relative w-full flex justify-between items-center">
{/* App Branding - Left */}
<Link
className={cn(
"text-3xl text-minecraft-green-3 hover:opacity-85 transition-all transform-gpu",
"text-3xl text-minecraft-green-3 hover:opacity-85 transition-all transform-gpu z-50",
minecrafter.className
)}
href="/"
@ -41,33 +40,35 @@ const Navbar = (): ReactElement => {
<span className="hidden lg:flex">{config.siteName}</span>
</Link>
{/* Links */}
<div className="flex gap-7">
{Object.entries(config.navbarLinks).map(
(link: [string, string], index: number) => {
const url: string = link[1]; // The href of the link
let active: boolean = path.startsWith(url); // Is this the active link?
return (
<Link
key={index}
className={cn(
"font-semibold uppercase hover:text-minecraft-green-4 transition-all transform-gpu",
active && "text-minecraft-green-4"
)}
href={url}
>
{link[0]}
</Link>
);
}
)}
{/* Center - Links */}
<div className="absolute inset-x-0 md:left-20 lg:left-0 flex justify-center md:justify-start lg:justify-center">
<div className="flex gap-7">
{Object.entries(config.navbarLinks).map(
(link: [string, string], index: number) => {
const url: string = link[1]; // The href of the link
let active: boolean = path.startsWith(url); // Is this the active link?
return (
<Link
key={index}
className={cn(
"font-semibold uppercase hover:text-minecraft-green-4 transition-all transform-gpu",
active && "text-minecraft-green-4"
)}
href={url}
>
{link[0]}
</Link>
);
}
)}
</div>
</div>
</div>
{/* Social Buttons - Right */}
<div className="hidden md:flex">
{/* Star on Github <3 */}
<GitHubStarButton />
{/* Social Buttons - Right */}
<div className="hidden md:flex">
{/* Star on Github <3 */}
<GitHubStarButton />
</div>
</div>
</nav>
);

@ -101,19 +101,24 @@ const PlayerResult = ({
part === SkinPart.FACE ||
part === SkinPart.BODY_FLAT
)
.map(([part, url], index) => (
<Link
key={index}
href={url}
target="_blank"
>
<img
className="h-20 sm:h-24 md:h-28 hover:scale-[1.02] transition-all transform-gpu"
src={url}
alt={`${username}'s ${part}`}
/>
</Link>
))}
.map(
(
[part, url]: [string, string],
index: number
) => (
<Link
key={index}
href={url}
target="_blank"
>
<img
className="h-20 sm:h-24 md:h-28 hover:scale-[1.02] transition-all transform-gpu"
src={url}
alt={`${username}'s ${part}`}
/>
</Link>
)
)}
</div>
</div>
</div>

@ -1,11 +1,11 @@
import { cn } from "@/lib/utils";
import Image from "next/image";
import { ReactElement, ReactNode } from "react";
import { ReactElement } from "react";
import {
CachedBedrockMinecraftServer,
CachedJavaMinecraftServer,
} from "restfulmc-lib";
import config from "../../config";
import config from "@/config";
/**
* The props for a server result.
@ -25,7 +25,7 @@ type ServerResultProps = {
*/
const ServerResult = ({ server }: ServerResultProps): ReactElement => {
const favicon: string | undefined = (server as CachedJavaMinecraftServer)
.favicon?.url; // The favicon of the server (TODO: bedrock)
.favicon?.url; // The favicon of the server
return (
<div
className={cn(

@ -62,7 +62,10 @@ const ServerSearch = ({
</SelectTrigger>
<SelectContent>
{Object.values(ServerPlatform).map(
(platform, index) => (
(
platform: ServerPlatform,
index: number
): ReactElement => (
<SelectItem key={index} value={platform}>
{capitialize(platform)}
</SelectItem>