and <meta description> // - Used by Next.js for SEO and social previews // ---------------------- export const metadata: Metadata = { title: "Components Demo", description: "Generated by Jamison Orton", }; // ---------------------- // Root Layout // - Wraps the entire app in a consistent structure // - Provides the BYU Header and Footer around all pages // - Includes SessionProvider so authentication is available globally // ---------------------- export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang="en" className="h-full"> <body className={`${ibmPlexSans.variable} antialiased flex flex-col min-h-screen`} > {/* ========================================================= SESSION PROVIDER - Makes NextAuth session data available throughout the app - Required for components like HeaderSignin that depend on login state ========================================================= */} <SessionProvider> {/* ========================================================= HEADER - Uses the custom <Header /> component - Accepts title, subtitle, breadcrumbs, rightItems, and navLinks props ========================================================= */} <Header title="Header Only" // 🔹 EDIT: Main title for your site/app subtitle="Subtitle" // 🔹 EDIT: Optional; remove if not needed /* --------------------------------------------------------- BREADCRUMBS: - Array of <Breadcrumb /> components. - Each breadcrumb takes `text` and `href`. - Shown only on desktop within the header. --------------------------------------------------------- */ breadcrumbs={[ <Breadcrumb text="Department" href="https://departmentsitehere.byu.edu" key={1} />, <Breadcrumb text="College" href="https://collegesitehere.byu.edu" key={2} />, ]} /* --------------------------------------------------------- RIGHT ITEMS: - Appears on the right side of the header (desktop) - On mobile, these items collapse into the hamburger menu - Here we use HeaderSignin and HeaderSearch 🔹 HeaderSignin → Handles login/logout via NextAuth 🔹 HeaderSearch → Expanding search input component --------------------------------------------------------- */ rightItems={[<HeaderSignin key={1} />, <HeaderSearch key={2} />]} /* --------------------------------------------------------- NAVIGATION LINKS: - Array of <HeaderNavLink /> components. - Can be simple links or dropdowns with nested routes. - Example below includes both link types. --------------------------------------------------------- */ navLinks={[ // Simple top-level links <HeaderNavLink text="Link 1" href="/" key={1} />, <HeaderNavLink text="Link 2" href="/link2" key={2} />, // Dropdown example with nested routes <HeaderNavLink text="Academics" dropdown // Enables dropdown behavior key="academics" items={[ { text: "Programs", href: "/programs" }, // You can also use /academics/programs for nested routing { text: "Departments", href: "/departments" }, ]} />, ]} /> {/* ========================================================= MAIN CONTENT AREA - Displays all page-level content for your Next.js routes - Stretches to fill remaining vertical space between Header and Footer ========================================================= */} <main className="flex-1">{children}</main> {/* ========================================================= FOOTER - Uses <Footer /> component - Can be customized independently (brand links, contact info, etc.) ========================================================= */} <Footer /> </SessionProvider> </body> </html> ); }

import type { Metadata } from "next"; import { IBM_Plex_Sans } from "next/font/google"; import "./globals.css"; // ---------------------- // BYU Header & Footer Components // ---------------------- import Header from "@/components/BYU-Header/Header"; import Breadcrumb from "@/components/BYU-Header/Header-breadcrumb"; import HeaderSignin from "@/components/BYU-Header/Header-signin"; import HeaderSearch from "@/components/BYU-Header/Header-search"; import HeaderNavLink from "@/components/BYU-Header/Header-navlink"; import Footer from "@/components/BYU-Footer/Footer"; // ---------------------- // Authentication Provider (NextAuth) // ---------------------- import { SessionProvider } from "next-auth/react"; // ---------------------- // Font Configuration // - Imports IBM Plex Sans from Google Fonts // - Assigns CSS variable for use in Tailwind styles // ---------------------- const ibmPlexSans = IBM_Plex_Sans({ variable: "--font-ibm-plex-sans", subsets: ["latin"], weight: ["100", "200", "300", "400", "500", "600", "700"], }); // ---------------------- // Metadata // - Sets default and <meta description> // - Used by Next.js for SEO and social previews // ---------------------- export const metadata: Metadata = { title: "Components Demo", description: "Generated by Jamison Orton", }; // ---------------------- // Root Layout // - Wraps the entire app in a consistent structure // - Provides the BYU Header and Footer around all pages // - Includes SessionProvider so authentication is available globally // ---------------------- export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang="en" className="h-full"> <body className={`${ibmPlexSans.variable} antialiased flex flex-col min-h-screen`} > {/* ========================================================= SESSION PROVIDER - Makes NextAuth session data available throughout the app - Required for components like HeaderSignin that depend on login state ========================================================= */} <SessionProvider> {/* ========================================================= HEADER - Uses the custom <Header /> component - Accepts title, subtitle, breadcrumbs, rightItems, and navLinks props ========================================================= */} <Header title="Header Only" // 🔹 EDIT: Main title for your site/app subtitle="Subtitle" // 🔹 EDIT: Optional; remove if not needed /* --------------------------------------------------------- BREADCRUMBS: - Array of <Breadcrumb /> components. - Each breadcrumb takes `text` and `href`. - Shown only on desktop within the header. --------------------------------------------------------- */ breadcrumbs={[ <Breadcrumb text="Department" href="https://departmentsitehere.byu.edu" key={1} />, <Breadcrumb text="College" href="https://collegesitehere.byu.edu" key={2} />, ]} /* --------------------------------------------------------- RIGHT ITEMS: - Appears on the right side of the header (desktop) - On mobile, these items collapse into the hamburger menu - Here we use HeaderSignin and HeaderSearch 🔹 HeaderSignin → Handles login/logout via NextAuth 🔹 HeaderSearch → Expanding search input component --------------------------------------------------------- */ rightItems={[<HeaderSignin key={1} />, <HeaderSearch key={2} />]} /* --------------------------------------------------------- NAVIGATION LINKS: - Array of <HeaderNavLink /> components. - Can be simple links or dropdowns with nested routes. - Example below includes both link types. --------------------------------------------------------- */ navLinks={[ // Simple top-level links <HeaderNavLink text="Link 1" href="/" key={1} />, <HeaderNavLink text="Link 2" href="/link2" key={2} />, // Dropdown example with nested routes <HeaderNavLink text="Academics" dropdown // Enables dropdown behavior key="academics" items={[ { text: "Programs", href: "/programs" }, // You can also use /academics/programs for nested routing { text: "Departments", href: "/departments" }, ]} />, ]} /> {/* ========================================================= MAIN CONTENT AREA - Displays all page-level content for your Next.js routes - Stretches to fill remaining vertical space between Header and Footer ========================================================= */} <main className="flex-1">{children}</main> {/* ========================================================= FOOTER - Uses <Footer /> component - Can be customized independently (brand links, contact info, etc.) ========================================================= */} <Footer /> </SessionProvider> </body> </html> ); }