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

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

@ -5,6 +5,7 @@ import Link from "next/link";
import { ReactElement } from "react";
import {
getMojangServerStatus,
MojangServer,
MojangServerStatus,
MojangServerStatusResponse,
} from "restfulmc-lib";
@ -46,7 +47,8 @@ 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) => {
{servers.map(
(server: MojangServer, index: number): ReactElement => {
const status: MojangServerStatus = server.status; // The status of the server
return (
<div
@ -81,7 +83,8 @@ const MojangStatusPage = async (): Promise<ReactElement> => {
</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
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 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.

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

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

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

@ -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(

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

@ -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(() => {

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

@ -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,7 +40,8 @@ const Navbar = (): ReactElement => {
<span className="hidden lg:flex">{config.siteName}</span>
</Link>
{/* Links */}
{/* 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) => {
@ -69,6 +69,7 @@ const Navbar = (): ReactElement => {
{/* Star on Github <3 */}
<GitHubStarButton />
</div>
</div>
</nav>
);
};

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

@ -101,7 +101,11 @@ const PlayerResult = ({
part === SkinPart.FACE ||
part === SkinPart.BODY_FLAT
)
.map(([part, url], index) => (
.map(
(
[part, url]: [string, string],
index: number
) => (
<Link
key={index}
href={url}
@ -113,7 +117,8 @@ const PlayerResult = ({
alt={`${username}'s ${part}`}
/>
</Link>
))}
)
)}
</div>
</div>
</div>

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

@ -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(

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

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