Updating

baseball/src/components/AppShell.tsx

@@ -1,9 +1,9 @@
 "use client";
 
+import SportsBaseballRoundedIcon from "@mui/icons-material/SportsBaseballRounded";
+import { Box, Chip, Container, Paper, Tab, Tabs, Typography } from "@mui/material";
 import Link from "next/link";
-import type { Route } from "next";
 import { usePathname } from "next/navigation";
-import { cn } from "@/lib/utils";
 
 const navItems = [
   { href: "/dashboard", label: "Dashboard" },
@@ -24,27 +24,95 @@ export function AppShell({
   actions?: React.ReactNode;
 }) {
   const pathname = usePathname();
+  const currentTab = navItems.find((item) => pathname === item.href)?.href ?? false;
 
   return (
-    <div className="app-shell">
-      <header className="hero">
-        <div>
-          <p className="eyebrow">Little League Coach Console</p>
-          <h1>{title}</h1>
-          <p className="hero-copy">{subtitle}</p>
-        </div>
-        {actions ? <div className="hero-actions">{actions}</div> : null}
-      </header>
+    <Container maxWidth="lg" sx={{ py: { xs: 2, md: 4 } }}>
+      <Paper
+        elevation={0}
+        sx={{
+          p: { xs: 3, md: 4 },
+          borderRadius: 7,
+          color: "common.white",
+          background:
+            "linear-gradient(135deg, rgba(9,45,64,0.98) 0%, rgba(15,92,77,0.96) 50%, rgba(207,111,46,0.92) 100%)",
+          boxShadow: "0 24px 64px rgba(16, 41, 52, 0.24)"
+        }}
+      >
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: { xs: "column", md: "row" },
+            justifyContent: "space-between",
+            gap: 3
+          }}
+        >
+          <Box sx={{ maxWidth: 760 }}>
+            <Chip
+              icon={<SportsBaseballRoundedIcon />}
+              label="Little League Coach Console"
+              sx={{
+                mb: 2,
+                color: "common.white",
+                bgcolor: "rgba(255,255,255,0.14)",
+                "& .MuiChip-icon": { color: "common.white" }
+              }}
+            />
+            <Typography variant="h1" sx={{ fontSize: { xs: "2.6rem", md: "4rem" }, lineHeight: 0.95 }}>
+              {title}
+            </Typography>
+            <Typography sx={{ mt: 1.5, maxWidth: 620, color: "rgba(255,255,255,0.84)" }}>{subtitle}</Typography>
+          </Box>
+          {actions ? <Box sx={{ display: "flex", alignItems: "flex-start" }}>{actions}</Box> : null}
+        </Box>
+      </Paper>
 
-      <nav className="tabs" aria-label="Primary">
-        {navItems.map((item) => (
-          <Link key={item.href} href={item.href as Route} className={cn("tab", pathname === item.href && "tab-active")}>
-            {item.label}
-          </Link>
-        ))}
-      </nav>
+      <Paper
+        elevation={0}
+        sx={{
+          mt: 2,
+          p: 1,
+          borderRadius: 5,
+          border: "1px solid rgba(15, 38, 47, 0.08)",
+          backgroundColor: "rgba(255,255,255,0.72)",
+          backdropFilter: "blur(10px)"
+        }}
+      >
+        <Tabs
+          value={currentTab}
+          variant="scrollable"
+          scrollButtons="auto"
+          aria-label="Primary"
+          sx={{
+            minHeight: 0,
+            "& .MuiTabs-indicator": { display: "none" }
+          }}
+        >
+          {navItems.map((item) => (
+            <Tab
+              key={item.href}
+              component={Link}
+              href={item.href}
+              value={item.href}
+              label={item.label}
+              sx={{
+                minHeight: 0,
+                borderRadius: 999,
+                color: "text.secondary",
+                "&.Mui-selected": {
+                  color: "text.primary",
+                  bgcolor: "background.paper",
+                  boxShadow: "0 10px 24px rgba(16, 41, 52, 0.08)"
+                }
+              }}
+            />
+          ))}
+        </Tabs>
+      </Paper>
 
-      <main className="page-grid">{children}</main>
-    </div>
+      <Box component="main" sx={{ display: "grid", gap: 2.25, mt: 2.5 }}>
+        {children}
+      </Box>
+    </Container>
   );
 }