Files
codetutor/frontend/src/app/layout.tsx

105 lines
3.4 KiB
TypeScript

import type { Metadata } from "next";
import Link from "next/link";
import "@fontsource/inter/400.css";
import "@fontsource/inter/500.css";
import "@fontsource/inter/600.css";
import "@fontsource/inter/700.css";
import { Providers } from "./providers";
import "./globals.css";
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || "https://codetutor.example.com";
export const metadata: Metadata = {
title: {
default: "CodeTutor - Coding Interview Preparation",
template: "%s | CodeTutor",
},
description:
"Master coding interviews with curated questions, detailed explanations, and optimal solutions. Practice 400+ problems with interactive code editor.",
keywords: [
"coding interview",
"leetcode",
"algorithm",
"data structures",
"programming practice",
"software engineering",
],
authors: [{ name: "Kai Chappell" }],
openGraph: {
type: "website",
locale: "en_US",
url: siteUrl,
siteName: "CodeTutor",
title: "CodeTutor - Coding Interview Preparation",
description:
"Master coding interviews with curated questions, detailed explanations, and optimal solutions.",
},
twitter: {
card: "summary_large_image",
title: "CodeTutor - Coding Interview Preparation",
description:
"Master coding interviews with curated questions, detailed explanations, and optimal solutions.",
},
metadataBase: new URL(siteUrl),
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className="min-h-screen antialiased">
<Providers>
<a
href="#main-content"
className="sr-only focus:not-sr-only focus:absolute focus:z-50 focus:p-4 focus:bg-[var(--primary)] focus:text-[var(--primary-foreground)]"
>
Skip to main content
</a>
<header className="border-b border-[var(--border)] bg-[var(--card)]">
<nav
className="container mx-auto px-4 py-4 flex items-center justify-between"
aria-label="Main navigation"
>
<Link
href="/"
className="text-xl font-bold text-[var(--primary)]"
>
CodeTutor
</Link>
<div className="flex items-center gap-6">
<Link
href="/questions"
className="text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors"
>
Questions
</Link>
<Link
href="/categories"
className="text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors"
>
Categories
</Link>
<Link
href="/patterns"
className="text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors"
>
Patterns
</Link>
</div>
</nav>
</header>
<main id="main-content" className="container mx-auto px-4 py-8">
{children}
</main>
<footer className="border-t border-[var(--border)] mt-auto py-6 text-center text-[var(--muted-foreground)] text-sm">
CodeTutor - Coding Interview Preparation
</footer>
</Providers>
</body>
</html>
);
}