Implement: Home Page with MUI Components (#13)

Reviewed and merged by Reid (Hermes Reviewer) Co-authored-by: crisleo-hermes <hermes@codescripters.org> Co-committed-by: crisleo-hermes <hermes@codescripters.org>
2026-05-26 06:21:33 +00:00
parent b91b7c364e
commit 5b6f628380
32 changed files with 2092 additions and 34 deletions
@@ -0,0 +1,40 @@
+import { type ReactNode } from "react";
+import { Outlet } from "react-router-dom";
+import AppBar from "@mui/material/AppBar";
+import Toolbar from "@mui/material/Toolbar";
+import Typography from "@mui/material/Typography";
+import Container from "@mui/material/Container";
+import Box from "@mui/material/Box";
+import CssBaseline from "@mui/material/CssBaseline";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: "#1976d2",
+    },
+    background: {
+      default: "#f5f5f5",
+    },
+  },
+});
+
+export default function AppLayout(): ReactNode {
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <Box sx={{ display: "flex", flexDirection: "column", minHeight: "100vh" }}>
+        <AppBar position="sticky">
+          <Toolbar>
+            <Typography variant="h6" component="h1" sx={{ fontWeight: 700 }}>
+              Job Tracker
+            </Typography>
+          </Toolbar>
+        </AppBar>
+        <Container component="main" maxWidth="lg" sx={{ mt: 4, mb: 4, flexGrow: 1 }}>
+          <Outlet />
+        </Container>
+      </Box>
+    </ThemeProvider>
+  );
+}