Updating
This commit is contained in:
Zeeshaun
@@ -1,15 +1,15 @@
|
||||
"use client";
|
||||
|
||||
import SportsBaseballRoundedIcon from "@mui/icons-material/SportsBaseballRounded";
|
||||
import { Box, Chip, Container, Paper, Tab, Tabs, Typography } from "@mui/material";
|
||||
import { BarChart3, ClipboardList, ShieldCheck, Trophy, Users } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const navItems = [
|
||||
{ href: "/dashboard", label: "Dashboard" },
|
||||
{ href: "/roster", label: "Roster" },
|
||||
{ href: "/lineup", label: "Generate Lineup" },
|
||||
{ href: "/settings", label: "Pitching Rules" }
|
||||
{ href: "/dashboard", label: "Dashboard", icon: BarChart3 },
|
||||
{ href: "/roster", label: "Roster", icon: Users },
|
||||
{ href: "/lineup", label: "Generate Lineup", icon: ClipboardList },
|
||||
{ href: "/settings", label: "Pitching Rules", icon: ShieldCheck }
|
||||
];
|
||||
|
||||
export function AppShell({
|
||||
@@ -24,95 +24,47 @@ export function AppShell({
|
||||
actions?: React.ReactNode;
|
||||
}) {
|
||||
const pathname = usePathname();
|
||||
const currentTab = navItems.find((item) => pathname === item.href)?.href ?? false;
|
||||
|
||||
return (
|
||||
<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>
|
||||
<div className="container py-4 md:py-8">
|
||||
<header className="relative overflow-hidden rounded-[2rem] bg-[linear-gradient(135deg,rgba(8,35,47,0.98)_0%,rgba(14,87,72,0.96)_52%,rgba(203,105,48,0.92)_100%)] p-6 text-white shadow-glow md:p-10">
|
||||
<div className="pointer-events-none absolute inset-0 bg-hero-grid bg-[size:38px_38px] opacity-20" />
|
||||
<div className="relative flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
|
||||
<div className="max-w-3xl">
|
||||
<div className="mb-4 inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/10 px-4 py-2 text-sm font-medium text-white/90 backdrop-blur">
|
||||
<Trophy className="h-4 w-4" />
|
||||
Little League Coach Console
|
||||
</div>
|
||||
<h1 className="font-display text-4xl font-semibold leading-none tracking-tight md:text-6xl">{title}</h1>
|
||||
<p className="mt-4 max-w-2xl text-base text-white/80 md:text-lg">{subtitle}</p>
|
||||
</div>
|
||||
{actions ? <div className="relative flex items-start">{actions}</div> : null}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<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
|
||||
<nav className="app-surface mt-4 flex flex-wrap gap-2 p-2">
|
||||
{navItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const active = pathname === item.href;
|
||||
return (
|
||||
<Link
|
||||
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>
|
||||
className={cn(
|
||||
"inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition",
|
||||
active
|
||||
? "bg-white text-foreground shadow-panel"
|
||||
: "text-muted-foreground hover:bg-white/80 hover:text-foreground"
|
||||
)}
|
||||
>
|
||||
<Icon className="h-4 w-4" />
|
||||
{item.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
<Box component="main" sx={{ display: "grid", gap: 2.25, mt: 2.5 }}>
|
||||
{children}
|
||||
</Box>
|
||||
</Container>
|
||||
<main className="mt-5 grid gap-5">{children}</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user