Move non-Admin page components into route group (#194)

- Since `usePathname` requires a Client Component and the Root Layout
  must be a Server Component, create a route group for the main site
- The Admin site will have it's own layout (without main Navbar/Footer)
- Move application form components into `@/lib/components/forms`
  - Update imports in application form sections accordingly
- Refactor `SceneLayout` for canvas scene
- Include brown background color on `body` for main layout

apps/site/src/app/apply/sections/Form/AgeInformation.tsx → apps/site/src/app/(main)/apply/sections/Form/AgeInformation.tsx

@@ -1,4 +1,4 @@
-import SimpleRadio from "@/app/apply/sections/Components/SimpleRadio";
+import SimpleRadio from "@/lib/components/forms/SimpleRadio";
 
 const yesNoOptions = [
 	{

apps/site/src/app/apply/sections/Form/BasicInformation.tsx → apps/site/src/app/(main)/apply/sections/Form/BasicInformation.tsx

@@ -1,5 +1,5 @@
-import RadioSelect from "@/app/apply/sections/Components/RadioSelect";
-import TextInput from "@/app/apply/sections/Components/TextInput";
+import RadioSelect from "@/lib/components/forms/RadioSelect";
+import TextInput from "@/lib/components/forms/TextInput";
 import styles from "./Form.module.scss";
 
 const pronouns = [

apps/site/src/app/apply/sections/Form/ProfileInformation.tsx → apps/site/src/app/(main)/apply/sections/Form/ProfileInformation.tsx

@@ -1,5 +1,5 @@
-import TextInput from "@/app/apply/sections/Components/TextInput";
-import Textfield from "@/app/apply/sections/Components/Textfield";
+import TextInput from "@/lib/components/forms/TextInput";
+import Textfield from "@/lib/components/forms/Textfield";
 import styles from "./Form.module.scss";
 
 const FRQ_MAX_LENGTH = 2000;

apps/site/src/app/apply/sections/Form/SchoolInformation.tsx → apps/site/src/app/(main)/apply/sections/Form/SchoolInformation.tsx

@@ -1,6 +1,6 @@
 import styles from "./Form.module.scss";
-import DropdownSelect from "@/app/apply/sections/Components/DropdownSelect";
-import SimpleRadio from "@/app/apply/sections/Components/SimpleRadio";
+import DropdownSelect from "@/lib/components/forms/DropdownSelect";
+import SimpleRadio from "@/lib/components/forms/SimpleRadio";
 
 //these values can be edited if backend needs it later on
 

apps/site/src/app/globals.css → apps/site/src/app/(main)/globals.css

@@ -13,6 +13,7 @@
 
 body {
 	color: var(--color-cream);
+	background-color: var(--color-brown);
 }
 
 p {

apps/site/src/app/(main)/layout.tsx

@@ -0,0 +1,30 @@
+import { PropsWithChildren } from "react";
+
+import type { Metadata } from "next";
+
+import water from "@/assets/backgrounds/water.jpg";
+import SceneLayout from "@/components/dom/SceneLayout";
+import Footer from "@/lib/components/Footer/Footer";
+import NavbarParent from "@/lib/components/Navbar/NavbarParent";
+
+import "./globals.css";
+
+export const metadata: Metadata = {
+	title: "IrvineHacks 2024",
+	description:
+		"IrvineHacks is Hack at UCI's premier hackathon for collegiate students.",
+};
+
+export default function Layout({ children }: PropsWithChildren) {
+	return (
+		<div
+			style={{ backgroundImage: `url(${water.src})` }}
+			className="overflow-x-hidden bg-top bg-repeat-y bg-[length:100%]"
+		>
+			{/* reference: https://github.com/pmndrs/react-three-next */}
+			<NavbarParent />
+			<SceneLayout>{children}</SceneLayout>
+			<Footer />
+		</div>
+	);
+}

apps/site/src/app/admin/demo/page.tsx

@@ -0,0 +1,5 @@
+function AdminDemo() {
+	return <div>AdminDemo</div>;
+}
+
+export default AdminDemo;

apps/site/src/app/admin/layout.tsx

@@ -0,0 +1,13 @@
+import { Metadata } from "next/types";
+
+import { PropsWithChildren } from "react";
+
+export const metadata: Metadata = {
+	title: "Admin | IrvineHacks 2024",
+};
+
+function Layout({ children }: PropsWithChildren) {
+	return <div style={{ color: "red" }}>{children}</div>;
+}
+
+export default Layout;

apps/site/src/app/layout.tsx

@@ -1,35 +1,9 @@
-import type { Metadata } from "next";
-import water from "@/assets/backgrounds/water.jpg";
-import Footer from "@/lib/components/Footer/Footer";
-import "./globals.css";
+import { PropsWithChildren } from "react";
 
-import { Layout } from "@/components/dom/Layout";
-import NavbarParent from "@/lib/components/Navbar/NavbarParent";
-
-export const metadata: Metadata = {
-	title: "IrvineHacks 2024",
-	description:
-		"IrvineHacks is Hack at UCI's premier hackathon for collegiate students.",
-};
-
-export default function RootLayout({
-	children,
-}: {
-	children: React.ReactNode;
-}) {
+export default function RootLayout({ children }: PropsWithChildren) {
 	return (
 		<html lang="en">
-			<body
-				style={{
-					backgroundImage: `url(${water.src})`,
-				}}
-				className="overflow-x-hidden bg-top bg-repeat-y bg-[length:100%]"
-			>
-				{/* reference: https://github.com/pmndrs/react-three-next */}
-				<NavbarParent />
-				<Layout>{children}</Layout>
-				<Footer />
-			</body>
+			<body>{children}</body>
 		</html>
 	);
 }

apps/site/src/components/dom/Layout.tsx → apps/site/src/components/dom/SceneLayout.tsx

@@ -1,9 +1,10 @@
 "use client";
 
-import { ReactNode, useRef } from "react";
+import { PropsWithChildren, useRef } from "react";
+
 import Scene from "@/components/canvas/Scene";
 
-const Layout = ({ children }: { children: ReactNode }) => {
+const SceneLayout = ({ children }: PropsWithChildren) => {
 	const ref = useRef<HTMLDivElement>(null);
 
 	return (
@@ -37,4 +38,4 @@ const Layout = ({ children }: { children: ReactNode }) => {
 	);
 };
 
-export { Layout };
+export default SceneLayout;