color changes and added a navbar
Some checks failed
deploy / deploy (push) Failing after 39s

This commit is contained in:
Lee 2023-10-20 11:54:20 +01:00
parent d3d076654e
commit 17baa366c8
10 changed files with 78 additions and 13 deletions

@ -1,7 +1,12 @@
const nextBuildId = require("next-build-id");
/** @type {import('next').NextConfig} */ /** @type {import('next').NextConfig} */
const nextConfig = { const nextConfig = {
generateEtags: true, generateEtags: true,
compress: true, compress: true,
env: {
NEXT_PUBLIC_BUILD_ID: nextBuildId.sync({ dir: __dirname }),
},
images: { images: {
remotePatterns: [ remotePatterns: [
{ {

9
package-lock.json generated

@ -14,6 +14,7 @@
"encoding": "^0.1.13", "encoding": "^0.1.13",
"moment": "^2.29.4", "moment": "^2.29.4",
"next": "13.5.6", "next": "13.5.6",
"next-build-id": "^3.0.0",
"node-fetch-cache": "^3.1.3", "node-fetch-cache": "^3.1.3",
"react": "^18", "react": "^18",
"react-country-flag": "^3.1.0", "react-country-flag": "^3.1.0",
@ -3411,6 +3412,14 @@
} }
} }
}, },
"node_modules/next-build-id": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/next-build-id/-/next-build-id-3.0.0.tgz",
"integrity": "sha512-B3JCsL/9Z/wkmo3EySukQHCgx89Aw0i4LPi2MEhCboQBJ6wpkYTIu1z6hOYKuw/S1Wy8ZRqCEq0dVY/ST6jGqg==",
"engines": {
"node": ">=8"
}
},
"node_modules/node-abi": { "node_modules/node-abi": {
"version": "3.51.0", "version": "3.51.0",
"resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.51.0.tgz", "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.51.0.tgz",

@ -15,6 +15,7 @@
"encoding": "^0.1.13", "encoding": "^0.1.13",
"moment": "^2.29.4", "moment": "^2.29.4",
"next": "13.5.6", "next": "13.5.6",
"next-build-id": "^3.0.0",
"node-fetch-cache": "^3.1.3", "node-fetch-cache": "^3.1.3",
"react": "^18", "react": "^18",
"react-country-flag": "^3.1.0", "react-country-flag": "^3.1.0",

@ -96,7 +96,7 @@ export default function Player({ params }: { params: { id: string } }) {
return ( return (
<main> <main>
<Container> <Container>
<div className="mt-2 flex w-full flex-col justify-center rounded-sm bg-neutral-800"> <div className="mt-2 flex w-full flex-col justify-center rounded-md bg-gray-800">
<div className="p-3 text-center"> <div className="p-3 text-center">
<div role="status"> <div role="status">
{player.loading && <Spinner />} {player.loading && <Spinner />}
@ -127,7 +127,7 @@ export default function Player({ params }: { params: { id: string } }) {
<main> <main>
<Container> <Container>
{/* Player Info */} {/* Player Info */}
<div className="mt-2 flex w-full flex-row justify-center rounded-sm bg-neutral-800 xs:flex-col"> <div className="mt-2 flex w-full flex-row justify-center rounded-md bg-gray-800 xs:flex-col">
<div className="flex flex-col items-center gap-3 p-3 xs:flex-row xs:items-start"> <div className="flex flex-col items-center gap-3 p-3 xs:flex-row xs:items-start">
<Avatar url={playerData.profilePicture} label="Avatar" /> <Avatar url={playerData.profilePicture} label="Avatar" />
<div className="flex flex-col items-center gap-2 xs:items-start"> <div className="flex flex-col items-center gap-2 xs:items-start">
@ -184,7 +184,7 @@ export default function Player({ params }: { params: { id: string } }) {
</div> </div>
{/* Scores */} {/* Scores */}
<div className="mt-2 flex w-full flex-row justify-center rounded-sm bg-neutral-800 xs:flex-col"> <div className="mt-2 flex w-full flex-row justify-center rounded-md bg-gray-800 xs:flex-col">
<div className="p-3"> <div className="p-3">
{scores.loading ? ( {scores.loading ? (
<div className="flex justify-center"> <div className="flex justify-center">
@ -249,7 +249,7 @@ export default function Player({ params }: { params: { id: string } }) {
</div> </div>
{/* Pagination */} {/* Pagination */}
<div className="flex w-full flex-row justify-center rounded-sm bg-neutral-800 xs:flex-col"> <div className="flex w-full flex-row justify-center rounded-md bg-gray-800 xs:flex-col">
<div className="p-3"> <div className="p-3">
<Pagination <Pagination
currentPage={scores.page} currentPage={scores.page}

@ -12,7 +12,7 @@ export default function Home() {
return ( return (
<main> <main>
<Container> <Container>
<div className="mt-2 flex w-full flex-col items-center justify-center rounded-sm bg-neutral-800"> <div className="mt-2 flex w-full flex-col items-center justify-center rounded-md bg-gray-800">
<Avatar <Avatar
className="m-6" className="m-6"
label="Player Avatar" label="Player Avatar"

@ -1,11 +1,14 @@
import Footer from "./Footer";
import Navbar from "./Navbar"; import Navbar from "./Navbar";
export default function Container({ children }: { children: React.ReactNode }) { export default function Container({ children }: { children: React.ReactNode }) {
return ( return (
<> <>
<div className="m-auto flex flex-col items-center justify-center opacity-90 md:max-w-[1200px]"> <div className="m-auto flex h-screen min-h-full flex-col items-center opacity-90 md:max-w-[1200px]">
<Navbar></Navbar> <Navbar />
{children} <div className="w-full flex-1">{children}</div>
<Footer />
</div> </div>
</> </>
); );

44
src/components/Footer.tsx Normal file

@ -0,0 +1,44 @@
import { isProduction } from "@/utils/utils";
const buttons = [
{
name: "Privacy",
url: "/privacy",
},
];
const buildId = process.env.NEXT_PUBLIC_BUILD_ID
? process.env.NEXT_PUBLIC_BUILD_ID.slice(0, 7) +
(isProduction() ? "" : "-dev")
: "";
export default function Footer() {
return (
<footer className="m-3 rounded-md bg-gray-800 text-gray-300">
<div className="m-3 flex flex-col items-center justify-center gap-1">
<div className="flex flex-row gap-3">
<p>Scoresaber Reloaded</p>
{buttons.map((button, index) => {
return (
<div
key={index}
className="flex flex-row items-center justify-center gap-3"
>
<div className="h-4 w-[1px] bg-neutral-100"></div>
<a
href={button.url}
className="transform-gpu transition-all hover:text-blue-500"
>
{button.name}
</a>
</div>
);
})}
</div>
<div className="text-sm text-gray-400">Build ID: {buildId}</div>
</div>
</footer>
);
}

@ -17,7 +17,7 @@ function NavbarButton({ text, icon, href, children }: ButtonProps) {
return ( return (
<div className="group"> <div className="group">
<a <a
className="flex w-fit transform-gpu items-center justify-center gap-1 rounded-sm p-3 transition-all hover:cursor-pointer hover:bg-blue-500" className="flex w-fit transform-gpu items-center justify-center gap-1 rounded-md p-3 transition-all hover:cursor-pointer hover:bg-blue-500"
href={href} href={href}
> >
<> <>
@ -27,7 +27,7 @@ function NavbarButton({ text, icon, href, children }: ButtonProps) {
</a> </a>
{children && ( {children && (
<div className="absolute z-20 hidden divide-y rounded-sm bg-neutral-600 shadow-sm group-hover:flex"> <div className="absolute z-20 hidden divide-y rounded-md bg-neutral-600 shadow-sm group-hover:flex">
<div className="p-2">{children}</div> <div className="p-2">{children}</div>
</div> </div>
)} )}
@ -38,7 +38,7 @@ function NavbarButton({ text, icon, href, children }: ButtonProps) {
export default function Navbar() { export default function Navbar() {
return ( return (
<> <>
<div className="flex h-fit w-full rounded-sm bg-neutral-800"> <div className="flex h-fit w-full rounded-md bg-gray-800">
<NavbarButton text="Friends" icon={<UserIcon height={20} width={20} />}> <NavbarButton text="Friends" icon={<UserIcon height={20} width={20} />}>
<p className="text-sm font-bold">No friends, add someone!</p> <p className="text-sm font-bold">No friends, add someone!</p>

@ -54,14 +54,14 @@ export default function SearchPlayer() {
<div <div
className={clsx( className={clsx(
"absolute z-20 mt-7 flex min-w-[14rem] flex-col divide-y rounded-sm bg-neutral-700 shadow-sm", "absolute z-20 mt-7 flex min-w-[14rem] flex-col divide-y rounded-md bg-neutral-700 shadow-sm",
players.length > 0 ? "flex" : "hidden", players.length > 0 ? "flex" : "hidden",
)} )}
> >
{players.map((player: ScoresaberPlayer) => ( {players.map((player: ScoresaberPlayer) => (
<a <a
key={player.id} key={player.id}
className="flex min-w-[14rem] items-center gap-2 rounded-sm p-2 transition-all hover:bg-neutral-600" className="flex min-w-[14rem] items-center gap-2 rounded-md p-2 transition-all hover:bg-neutral-600"
href={`/player/${player.id}`} href={`/player/${player.id}`}
> >
<Avatar label="Account" size={40} url={player.profilePicture} /> <Avatar label="Account" size={40} url={player.profilePicture} />

3
src/utils/utils.ts Normal file

@ -0,0 +1,3 @@
export function isProduction() {
return process.env.NODE_ENV === "production";
}