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

Get a better style down

Browse Source
This commit is contained in:
Braydon 2024-04-15 22:31:55 -04:00
parent 0072dc0362
commit d29004f673
10 changed files with 119 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Frontend/bun.lockb
View File

Binary file not shown.

1
Frontend/package.json
View File

@ -11,6 +11,7 @@
"lint": "next lint" "lint": "next lint"
}, },
"dependencies": { "dependencies": {
"@heroicons/react": "^2.1.3",
"@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-tooltip": "^1.0.7", "@radix-ui/react-tooltip": "^1.0.7",
"class-variance-authority": "^0.7.0", "class-variance-authority": "^0.7.0",

3
Frontend/src/app/(pages)/layout.tsx
View File

@ -1,6 +1,7 @@
import Navbar from "@/components/navbar"; import Navbar from "@/components/navbar";
import { TooltipProvider } from "@/components/ui/tooltip"; import { TooltipProvider } from "@/components/ui/tooltip";
import config from "@/config"; import config from "@/config";
import { cn } from "@/lib/utils";
import ThemeProvider from "@/provider/theme-provider"; import ThemeProvider from "@/provider/theme-provider";
import type { Metadata, Viewport } from "next"; import type { Metadata, Viewport } from "next";
import PlausibleProvider from "next-plausible"; import PlausibleProvider from "next-plausible";
@ -31,7 +32,7 @@ const RootLayout = ({
}>): JSX.Element => { }>): JSX.Element => {
const analyticsDomain: string | undefined = config.analyticsDomain; const analyticsDomain: string | undefined = config.analyticsDomain;
return ( return (
<html lang="en" className={`scroll-smooth ${notoSans.className}`}> <html lang="en" className={cn("scroll-smooth", notoSans.className)}>
<head> <head>
{analyticsDomain && ( {analyticsDomain && (
<PlausibleProvider <PlausibleProvider

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

@ -1,11 +1,13 @@
import Hero from "@/components/landing/hero";
/** /**
* The home page of the site. * The landing page of the site.
* *
* @returns the home page jsx * @returns the landing page jsx
*/ */
const HomePage = (): JSX.Element => ( const LandingPage = (): JSX.Element => (
<main className="flex justify-center items-center h-screen"> <main>
<span>Hello World</span> <Hero />
</main> </main>
); );
export default HomePage; export default LandingPage;

18
Frontend/src/app/components/landing/hero.tsx Normal file
View File

@ -0,0 +1,18 @@
import config from "@/config";
import { minecrafter } from "@/font/fonts";
import { cn } from "@/lib/utils";
const Hero = (): JSX.Element => (
<div className="flex flex-col gap-4 justify-center items-center h-screen">
{/* Title */}
<h1
className={cn("text-5xl text-minecraft-green-3", minecrafter.className)}
>
{config.siteName}
</h1>
{/* Subtitle */}
<h2 className="text-xl">{config.metadata.description}</h2>
</div>
);
export default Hero;

35
Frontend/src/app/components/minecraft-button.tsx Normal file
View File

@ -0,0 +1,35 @@
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
/**
* A Minecraft styled button.
*
* @returns the button jsx
*/
const MinecraftButton = ({
className,
children,
...props
}: Readonly<{
className?: string;
children: React.ReactNode;
}>): JSX.Element => (
<Button
className={cn(
"before:absolute before:-inset-x-5 before:rotate-90 before:w-9 before:h-1 before:bg-minecraft-green-1", // Left Green Bar
"after:absolute after:inset-x-[91.5%] after:rotate-90 after:w-9 after:h-1 after:bg-minecraft-green-1", // Right Green Bar
"relative h-11 px-5 bg-minecraft-green-2 hover:opacity-85 hover:bg-minecraft-green-2 rounded-none tracking-wide font-semibold uppercase transition-all transform-gpu", // Styling
className
)}
variant="ghost"
style={{
// Above and below the button shadow
boxShadow:
"inset 0 -4px 0 hsl(var(--minecraft-green-1)), inset 0 4px 0 hsl(var(--minecraft-green-3));",
}}
{...props}
>
{children}
</Button>
);
export default MinecraftButton;

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

@ -1,41 +1,57 @@
import MinecraftButton from "@/components/minecraft-button";
import config from "@/config"; import config from "@/config";
import localFont from "next/font/local"; import { minecrafter } from "@/font/fonts";
import { cn } from "@/lib/utils";
import { StarIcon } from "@heroicons/react/24/outline";
import Link from "next/link"; import Link from "next/link";
/**
* The title font to use to brand the site.
*/
const minecrafter = localFont({
src: "../font/Minecrafter.ttf",
});
/** /**
* The navbar for the site. * The navbar for the site.
* *
* @returns the navbar jsx * @returns the navbar jsx
*/ */
const Navbar = () => ( const Navbar = (): JSX.Element => (
<nav className="fixed inset-x-0 h-16 px-10 flex justify-between items-center bg-navbar-background uppercase"> <nav className="fixed inset-x-0 flex h-16 px-12 justify-between items-center bg-navbar-background">
{/* Links */} {/* Left */}
<div className={`relative flex gap-5`}> <div className="flex gap-16 items-center">
{Object.entries(config.navbarLinks).map((link, index) => ( {/* App Branding */}
<Link key={index} href={link[1]}>
{link[0]}
</Link>
))}
</div>
{/* Site Branding */}
<div>
<Link <Link
className={`text-3xl text-minecraft-green-1 ${minecrafter.className}`} className={cn(
"text-3xl text-minecraft-green-3 hover:opacity-85 transition-all transform-gpu",
minecrafter.className
)}
href="/" href="/"
> >
{config.siteName} {config.siteName}
</Link> </Link>
{/* Links */}
<div className="flex gap-7">
{Object.entries(config.navbarLinks).map((link, index) => (
<Link
key={index}
className="font-semibold uppercase hover:text-minecraft-green-4 transition-all transform-gpu"
href={link[1]}
>
{link[0]}
</Link>
))}
</div>
</div> </div>
<div>Three</div> {/* Social Buttons */}
<div>
{/* Star on Github <3 */}
<MinecraftButton>
<Link
className="flex gap-1.5 items-center"
href="https://github.com/Rainnny7/RESTfulMC"
>
<StarIcon width={22} height={22} />
<span>Star on GitHub</span>
</Link>
</MinecraftButton>
</div>
</nav> </nav>
); );
export default Navbar; export default Navbar;

8
Frontend/src/app/font/fonts.ts Normal file
View File

@ -0,0 +1,8 @@
import localFont from "next/font/local";
/**
* The title font to use to brand the site.
*/
export const minecrafter = localFont({
src: "../font/Minecrafter.ttf",
});

7
Frontend/src/app/globals.css
View File

@ -37,8 +37,11 @@
/* Navbar */ /* Navbar */
--navbar-background: 0 0% 7%; --navbar-background: 0 0% 7%;
/* Minecraft Colors */ /* Minecraft Colors (Dark -> Light) */
--minecraft-green-1: 104 51% 43%; --minecraft-green-1: 108 56% 25%;
--minecraft-green-2: 107 55% 34%;
--minecraft-green-3: 104 51% 43%;
--minecraft-green-4: 103 50% 53%;
} }
} }

3
Frontend/tailwind.config.ts
View File

@ -51,6 +51,9 @@ const config = {
// Custom Colors // Custom Colors
"navbar-background": "hsl(var(--navbar-background))", "navbar-background": "hsl(var(--navbar-background))",
"minecraft-green-1": "hsl(var(--minecraft-green-1))", "minecraft-green-1": "hsl(var(--minecraft-green-1))",
"minecraft-green-2": "hsl(var(--minecraft-green-2))",
"minecraft-green-3": "hsl(var(--minecraft-green-3))",
"minecraft-green-4": "hsl(var(--minecraft-green-4))",
}, },
borderRadius: { borderRadius: {
lg: "var(--radius)", lg: "var(--radius)",