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

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
Frontend/src/app/(pages)/mojang/page.tsx
View File

@ -5,6 +5,7 @@ import Link from "next/link";
import { ReactElement } from "react"; import { ReactElement } from "react";
import { import {
getMojangServerStatus, getMojangServerStatus,
MojangServer,
MojangServerStatus, MojangServerStatus,
MojangServerStatusResponse, MojangServerStatusResponse,
} from "restfulmc-lib"; } from "restfulmc-lib";
@ -46,42 +47,44 @@ const MojangStatusPage = async (): Promise<ReactElement> => {
{/* Server Statuses */} {/* 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"> <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) => { {servers.map(
const status: MojangServerStatus = server.status; // The status of the server (server: MojangServer, index: number): ReactElement => {
return ( const status: MojangServerStatus = server.status; // The status of the server
<div return (
key={index} <div
className={cn( key={index}
"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
className={cn( className={cn(
"font-semibold pointer-events-none", "flex justify-between items-center",
statusStyles[status] index > 0 && "pt-2"
)} )}
> >
{status} <div className="flex flex-col gap-0.5">
</h2> <h1 className="pointer-events-none">
</div> {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> </div>
</main> </main>
); );
@ -90,7 +93,9 @@ const MojangStatusPage = async (): Promise<ReactElement> => {
/** /**
* The styles for each status. * The styles for each status.
*/ */
const statusStyles: any = { const statusStyles: {
[status: string]: string;
} = {
ONLINE: "text-green-500", ONLINE: "text-green-500",
DEGRADED: "text-yellow-500", DEGRADED: "text-yellow-500",
OFFLINE: "text-red-500", OFFLINE: "text-red-500",

2
Frontend/src/app/(pages)/page.tsx
View File

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

2
Frontend/src/app/components/embed.tsx
View File

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

5
Frontend/src/app/components/footer.tsx
View File

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

2
Frontend/src/app/components/github-star-button.tsx
View File

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

61
Frontend/src/app/components/navbar.tsx
View File

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

31
Frontend/src/app/components/player/player-result.tsx
View File

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

6
Frontend/src/app/components/server/server-result.tsx
View File

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

5
Frontend/src/app/components/server/server-search.tsx
View File

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