This commit is contained in:
Zeeshaun
2026-05-06 16:10:07 +00:00
parent 2ed854389c
commit 02186dcdfa
15 changed files with 557 additions and 189 deletions
+11 -10
View File
@@ -1,6 +1,6 @@
"use client";
import { BarChart3, ClipboardList, ShieldCheck, Trophy, Users } from "lucide-react";
import { BarChart3, ClipboardList, ShieldCheck, TimerReset, Trophy, Users } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";
@@ -8,6 +8,7 @@ import { cn } from "@/lib/utils";
const navItems = [
{ href: "/dashboard", label: "Dashboard", icon: BarChart3 },
{ href: "/roster", label: "Roster", icon: Users },
{ href: "/pitching", label: "Pitch Tracking", icon: TimerReset },
{ href: "/lineup", label: "Generate Lineup", icon: ClipboardList },
{ href: "/settings", label: "Pitching Rules", icon: ShieldCheck }
];
@@ -26,24 +27,24 @@ export function AppShell({
const pathname = usePathname();
return (
<div className="container py-4 md:py-8">
<header className="relative overflow-hidden rounded-[2rem] border bg-primary p-6 text-primary-foreground shadow-glow md:p-10">
<div className="container py-3 md:py-6">
<header className="relative overflow-hidden rounded-[1.75rem] border bg-primary p-4 text-primary-foreground shadow-glow md:p-7">
<div className="pointer-events-none absolute inset-0 bg-hero-grid bg-[size:38px_38px] opacity-[0.08]" />
<div className="pointer-events-none absolute inset-x-0 top-0 h-24 bg-gradient-to-b from-white/10 to-transparent" />
<div className="relative flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
<div className="relative flex flex-col gap-4 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/10 bg-white/5 px-4 py-2 text-sm font-medium text-white/80">
<div className="mb-3 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-xs font-medium text-white/80">
<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/70 md:text-lg">{subtitle}</p>
<h1 className="font-display text-3xl font-semibold leading-none tracking-tight md:text-5xl">{title}</h1>
<p className="mt-3 max-w-2xl text-sm text-white/70 md:text-base">{subtitle}</p>
</div>
{actions ? <div className="relative flex items-start">{actions}</div> : null}
</div>
</header>
<nav className="app-surface mt-4 flex flex-wrap gap-2 p-2">
<nav className="app-surface mt-3 flex flex-wrap gap-1.5 p-1.5">
{navItems.map((item) => {
const Icon = item.icon;
const active = pathname === item.href;
@@ -52,7 +53,7 @@ export function AppShell({
key={item.href}
href={item.href}
className={cn(
"inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition",
"inline-flex items-center gap-2 rounded-full px-3 py-2 text-xs font-medium transition md:text-sm",
active
? "bg-primary text-primary-foreground shadow-panel"
: "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
@@ -65,7 +66,7 @@ export function AppShell({
})}
</nav>
<main className="mt-5 grid gap-5">{children}</main>
<main className="mt-4 grid gap-4">{children}</main>
</div>
);
}