import type { Metadata } from "next";
import { IBM_Plex_Sans } from "next/font/google";
import "./globals.css";
// ----------------------
// Header + Footer Components
// ----------------------
import Header from "@/components/BYU-Header/Header";
import Breadcrumb from "@/components/BYU-Header/Header-breadcrumb";
import HeaderSearch from "@/components/BYU-Header/Header-search";
import HeaderNavLink from "@/components/BYU-Header/Header-navlink";
import Footer from "@/components/BYU-Footer/Footer";
// ----------------------
// Font Configuration
// - Adds IBM Plex Sans via next/font
// - Creates a CSS variable to use in Tailwind styles
// ----------------------
const ibmPlexSans = IBM_Plex_Sans({
variable: "--font-ibm-plex-sans",
subsets: ["latin"],
weight: ["100", "200", "300", "400", "500", "600", "700"],
});
// ----------------------
// Page Metadata
// ----------------------
export const metadata: Metadata = {
title: "Components Demo",
description: "Generated by Jamison Orton",
};
// ----------------------
// Root Layout
// - Wraps the entire app with Header + Footer
// - Demonstrates how to plug in the BYU Header components
// ----------------------
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
{/* =========================================================
HEADER SETUP
- Uses component
- Accepts props for title, subtitle, breadcrumbs, rightItems, and navLinks
========================================================= */}
components.
- Each receives `text` and `href`.
- Shown only on desktop in the header.
--------------------------------------------------------- */
breadcrumbs={[
,
,
]}
/* ---------------------------------------------------------
RIGHT ITEMS:
- Appears on the right side of the header.
- Example: search bar, user profile, or button.
- On mobile, these move into the hamburger menu automatically.
--------------------------------------------------------- */
rightItems={[]}
/* ---------------------------------------------------------
NAVIGATION LINKS:
- Each item is a .
- Supports both single links and dropdown menus.
- Example dropdown shows nested items.
--------------------------------------------------------- */
navLinks={[
// 🔹 Simple link (non-dropdown)
,
// 🔹 Another simple link
,
// 🔹 Dropdown example
,
]}
/>
{/* =========================================================
MAIN CONTENT AREA
- Renders your page content (from Next.js route)
========================================================= */}
{children}
{/* =========================================================
FOOTER
- Uses component (can be customized separately)
========================================================= */}
);
}