This commit is contained in:
parent
d3d076654e
commit
17baa366c8
@ -1,7 +1,12 @@
|
||||
const nextBuildId = require("next-build-id");
|
||||
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
generateEtags: true,
|
||||
compress: true,
|
||||
env: {
|
||||
NEXT_PUBLIC_BUILD_ID: nextBuildId.sync({ dir: __dirname }),
|
||||
},
|
||||
images: {
|
||||
remotePatterns: [
|
||||
{
|
||||
|
9
package-lock.json
generated
9
package-lock.json
generated
@ -14,6 +14,7 @@
|
||||
"encoding": "^0.1.13",
|
||||
"moment": "^2.29.4",
|
||||
"next": "13.5.6",
|
||||
"next-build-id": "^3.0.0",
|
||||
"node-fetch-cache": "^3.1.3",
|
||||
"react": "^18",
|
||||
"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": {
|
||||
"version": "3.51.0",
|
||||
"resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.51.0.tgz",
|
||||
|
@ -15,6 +15,7 @@
|
||||
"encoding": "^0.1.13",
|
||||
"moment": "^2.29.4",
|
||||
"next": "13.5.6",
|
||||
"next-build-id": "^3.0.0",
|
||||
"node-fetch-cache": "^3.1.3",
|
||||
"react": "^18",
|
||||
"react-country-flag": "^3.1.0",
|
||||
|
@ -96,7 +96,7 @@ export default function Player({ params }: { params: { id: string } }) {
|
||||
return (
|
||||
<main>
|
||||
<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 role="status">
|
||||
{player.loading && <Spinner />}
|
||||
@ -127,7 +127,7 @@ export default function Player({ params }: { params: { id: string } }) {
|
||||
<main>
|
||||
<Container>
|
||||
{/* 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">
|
||||
<Avatar url={playerData.profilePicture} label="Avatar" />
|
||||
<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>
|
||||
|
||||
{/* 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">
|
||||
{scores.loading ? (
|
||||
<div className="flex justify-center">
|
||||
@ -249,7 +249,7 @@ export default function Player({ params }: { params: { id: string } }) {
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
<Pagination
|
||||
currentPage={scores.page}
|
||||
|
@ -12,7 +12,7 @@ export default function Home() {
|
||||
return (
|
||||
<main>
|
||||
<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
|
||||
className="m-6"
|
||||
label="Player Avatar"
|
||||
|
@ -1,11 +1,14 @@
|
||||
import Footer from "./Footer";
|
||||
import Navbar from "./Navbar";
|
||||
|
||||
export default function Container({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<>
|
||||
<div className="m-auto flex flex-col items-center justify-center opacity-90 md:max-w-[1200px]">
|
||||
<Navbar></Navbar>
|
||||
{children}
|
||||
<div className="m-auto flex h-screen min-h-full flex-col items-center opacity-90 md:max-w-[1200px]">
|
||||
<Navbar />
|
||||
<div className="w-full flex-1">{children}</div>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
44
src/components/Footer.tsx
Normal file
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 (
|
||||
<div className="group">
|
||||
<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}
|
||||
>
|
||||
<>
|
||||
@ -27,7 +27,7 @@ function NavbarButton({ text, icon, href, children }: ButtonProps) {
|
||||
</a>
|
||||
|
||||
{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>
|
||||
)}
|
||||
@ -38,7 +38,7 @@ function NavbarButton({ text, icon, href, children }: ButtonProps) {
|
||||
export default function Navbar() {
|
||||
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} />}>
|
||||
<p className="text-sm font-bold">No friends, add someone!</p>
|
||||
|
||||
|
@ -54,14 +54,14 @@ export default function SearchPlayer() {
|
||||
|
||||
<div
|
||||
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.map((player: ScoresaberPlayer) => (
|
||||
<a
|
||||
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}`}
|
||||
>
|
||||
<Avatar label="Account" size={40} url={player.profilePicture} />
|
||||
|
3
src/utils/utils.ts
Normal file
3
src/utils/utils.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export function isProduction() {
|
||||
return process.env.NODE_ENV === "production";
|
||||
}
|
Loading…
Reference in New Issue
Block a user