xcl
/
xcl-website
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add root layout and remove per-page layout

This commit is contained in:
Hri7566 2023-09-14 00:48:52 -04:00
parent f6560f6e6b
commit 1866dc3a84
5 changed files with 90 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/layout.tsx Normal file
View File

@ -0,0 +1,33 @@
import Head from "next/head";
export default function Layout({ children }: { children: React.ReactNode }) {
const bgs = [
"/bg/webp/bg1.webp",
"/bg/webp/bg2.webp",
"/bg/webp/bg3.webp",
"/bg/webp/bg4.webp",
"/bg/webp/bg5.webp",
"/bg/webp/bg6.webp",
"/bg/webp/bg7.webp",
"/bg/webp/bg8.webp",
"/bg/webp/bg9.webp",
];
const randomBg = bgs[Math.floor(Math.random() * bgs.length)] as string;
return (
<>
<Head>
<title>XCL</title>
<meta name="description" content="XCL homepage" />
<link rel="icon" href="/favicon.svg" />
</Head>
<main
className="bg-cover bg-center"
style={{ backgroundImage: `url("${randomBg}")` }}
>
{children}
</main>
</>
);
}

3
src/pages/_app.tsx
View File

@ -3,6 +3,7 @@ import { SessionProvider } from "next-auth/react";
import { type AppType } from "next/app"; import { type AppType } from "next/app";
import { api } from "~/utils/api"; import { api } from "~/utils/api";
import "~/styles/globals.css"; import "~/styles/globals.css";
import Layout from "~/components/layout";
const MyApp: AppType<{ session: Session | null }> = ({ const MyApp: AppType<{ session: Session | null }> = ({
Component, Component,
@ -10,7 +11,9 @@ const MyApp: AppType<{ session: Session | null }> = ({
}) => { }) => {
return ( return (
<SessionProvider session={session}> <SessionProvider session={session}>
<Layout>
<Component {...pageProps} /> <Component {...pageProps} />
</Layout>
</SessionProvider> </SessionProvider>
); );
}; };

39
src/pages/about.tsx
View File

@ -1,40 +1,10 @@
import { signIn, signOut, useSession } from "next-auth/react";
import Head from "next/head";
import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { api } from "~/utils/api";
import { Logo } from "../components/Logo"; import { Logo } from "../components/Logo";
import { LinkButton } from "../components/LinkButton";
import { NavigationBar } from "../components/NavigationBar"; import { NavigationBar } from "../components/NavigationBar";
import { PageContentBox } from "~/components/PageContentBox"; import { PageContentBox } from "~/components/PageContentBox";
export default function About() { export default function About() {
const bgs = [
"/bg/webp/bg1.webp",
"/bg/webp/bg2.webp",
"/bg/webp/bg3.webp",
"/bg/webp/bg4.webp",
"/bg/webp/bg5.webp",
"/bg/webp/bg6.webp",
"/bg/webp/bg7.webp",
"/bg/webp/bg8.webp",
"/bg/webp/bg9.webp",
];
const randomBg = bgs[Math.floor(Math.random() * bgs.length)] as string;
return ( return (
<>
<Head>
<title>XCL</title>
<meta name="description" content="About XCL" />
<link rel="icon" href="/favicon.ico" />
</Head>
{/* <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#993800] to-[#250e00]"> */}
<main
className="bg-cover bg-center"
style={{ backgroundImage: `url("${randomBg}")` }}
>
<div className="bg-black/60"> <div className="bg-black/60">
<div className="flex min-h-screen flex-col items-center justify-center bg-orange-800/40"> <div className="flex min-h-screen flex-col items-center justify-center bg-orange-800/40">
<Link className="absolute left-0 top-0" href="/"> <Link className="absolute left-0 top-0" href="/">
@ -47,17 +17,14 @@ export default function About() {
<div className="grid grid-cols-1 gap-4 sm:grid-cols-1 md:gap-8"> <div className="grid grid-cols-1 gap-4 sm:grid-cols-1 md:gap-8">
<PageContentBox title="Our Mission"> <PageContentBox title="Our Mission">
Here at XCL, we strive to make the SwitchCraft 3 server as Here at XCL, we strive to make the SwitchCraft 3 server as
unbearable as possible. While these noobs at SpaceTech are unbearable as possible. While these noobs at SpaceTech are feeding
feeding cookies to parrots, we build space stations not only cookies to parrots, we build space stations not only for the
for the astronauts, but also for the olympians and war heroes astronauts, but also for the olympians and war heroes of our time.
of our time.
</PageContentBox> </PageContentBox>
</div> </div>
<div className="flex flex-col items-center gap-2"></div> <div className="flex flex-col items-center gap-2"></div>
</div> </div>
</div> </div>
</div> </div>
</main>
</>
); );
} }

32
src/pages/index.tsx
View File

@ -1,39 +1,9 @@
import { signIn, signOut, useSession } from "next-auth/react";
import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import { api } from "~/utils/api";
import { Logo } from "../components/Logo"; import { Logo } from "../components/Logo";
import { LinkButton } from "../components/LinkButton"; import { LinkButton } from "../components/LinkButton";
import { NavigationBar } from "../components/NavigationBar"; import { NavigationBar } from "../components/NavigationBar";
export default function Home() { export default function Home() {
const bgs = [
"/bg/webp/bg1.webp",
"/bg/webp/bg2.webp",
"/bg/webp/bg3.webp",
"/bg/webp/bg4.webp",
"/bg/webp/bg5.webp",
"/bg/webp/bg6.webp",
"/bg/webp/bg7.webp",
"/bg/webp/bg8.webp",
"/bg/webp/bg9.webp",
];
const randomBg = bgs[Math.floor(Math.random() * bgs.length)] as string;
return ( return (
<>
<Head>
<title>XCL</title>
<meta name="description" content="XCL homepage" />
<link rel="icon" href="/favicon.svg" />
</Head>
{/* <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#993800] to-[#250e00]"> */}
<main
className="bg-cover bg-center"
style={{ backgroundImage: `url("${randomBg}")` }}
>
<div className="bg-black/60"> <div className="bg-black/60">
<div className="flex min-h-screen flex-col items-center justify-center bg-orange-800/40"> <div className="flex min-h-screen flex-col items-center justify-center bg-orange-800/40">
<div className="absolute right-0 top-0"> <div className="absolute right-0 top-0">
@ -52,7 +22,5 @@ export default function Home() {
</div> </div>
</div> </div>
</div> </div>
</main>
</>
); );
} }

29
src/pages/team.tsx
View File

@ -1,5 +1,3 @@
import { signIn, signOut, useSession } from "next-auth/react";
import Head from "next/head";
import Link from "next/link"; import Link from "next/link";
import { Logo } from "../components/Logo"; import { Logo } from "../components/Logo";
import { NavigationBar } from "~/components/NavigationBar"; import { NavigationBar } from "~/components/NavigationBar";
@ -7,32 +5,7 @@ import { PageContentBox } from "~/components/PageContentBox";
import { EmployeeList } from "~/components/EmployeeList"; import { EmployeeList } from "~/components/EmployeeList";
export default function Team() { export default function Team() {
const bgs = [
"/bg/webp/bg1.webp",
"/bg/webp/bg2.webp",
"/bg/webp/bg3.webp",
"/bg/webp/bg4.webp",
"/bg/webp/bg5.webp",
"/bg/webp/bg6.webp",
"/bg/webp/bg7.webp",
"/bg/webp/bg8.webp",
"/bg/webp/bg9.webp",
];
const randomBg = bgs[Math.floor(Math.random() * bgs.length)] as string;
return ( return (
<>
<Head>
<title>XCL</title>
<meta name="description" content="XCL's team" />
<link rel="icon" href="/favicon.ico" />
</Head>
{/* <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#993800] to-[#250e00]"> */}
<main
className="bg-cover bg-center"
style={{ backgroundImage: `url("${randomBg}")` }}
>
<div className="bg-black/60"> <div className="bg-black/60">
<div className="flex min-h-screen flex-col items-center justify-center bg-orange-800/40"> <div className="flex min-h-screen flex-col items-center justify-center bg-orange-800/40">
<Link className="absolute left-0 top-0" href="/"> <Link className="absolute left-0 top-0" href="/">
@ -50,7 +23,5 @@ export default function Team() {
</div> </div>
</div> </div>
</div> </div>
</main>
</>
); );
} }