Cleanup and center the links in the navbar
Some checks failed
Deploy Frontend / docker (17, 3.8.5) (push) Has been cancelled
Some checks failed
Deploy Frontend / docker (17, 3.8.5) (push) Has been cancelled
This commit is contained in:
parent
4bccec1f5d
commit
1244b6d142
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user