e0cd829b9f
- Two-column layout (My Leagues 2/3, Upcoming Events 1/3) with mobile stack - LeagueRow: square avatar, gradient draft highlight, rank/points display, progress bar - MyLeaguesCard, CreateLeagueCard with shared SectionCardHeader - UpcomingEventsCard: vertical timeline with grouped multi-league events - Shared gradient system: BracktGradients SVG defs, GradientIcon wrapper, brand.ts constants - Button default variant updated to green→cyan gradient - Navbar: plain nav links with gradient hover, support/admin icon buttons - Accessibility fixes: semantic h2 headings, aria-label on LeagueAvatar and nav elements - Storybook stories for all new components Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
import { Shield } from "lucide-react";
|
|
import { Link } from "react-router";
|
|
import { Card, CardContent } from "~/components/ui/card";
|
|
import { SectionCardHeader } from "~/components/ui/SectionCardHeader";
|
|
import { LeagueRow, type LeagueRowProps } from "./LeagueRow";
|
|
|
|
const STATUS_ORDER: Record<LeagueRowProps["status"], number> = {
|
|
draft: 0,
|
|
active: 1,
|
|
pre_draft: 2,
|
|
completed: 3,
|
|
};
|
|
|
|
interface MyLeaguesCardProps {
|
|
leagues: LeagueRowProps[];
|
|
viewAllUrl?: string;
|
|
}
|
|
|
|
export function MyLeaguesCard({ leagues, viewAllUrl }: MyLeaguesCardProps) {
|
|
const sorted = leagues.toSorted(
|
|
(a, b) => STATUS_ORDER[a.status] - STATUS_ORDER[b.status]
|
|
);
|
|
|
|
const right = viewAllUrl ? (
|
|
<Link
|
|
to={viewAllUrl}
|
|
className="text-xs font-semibold uppercase tracking-wide text-electric hover:underline"
|
|
>
|
|
View All Leagues
|
|
</Link>
|
|
) : undefined;
|
|
|
|
return (
|
|
<Card className="bg-[#181b22] gap-2">
|
|
<SectionCardHeader icon={Shield} title="My Leagues" right={right} />
|
|
<CardContent>
|
|
{sorted.length === 0 ? (
|
|
<div className="py-4 text-center">
|
|
<p className="text-sm text-muted-foreground mb-3">
|
|
You aren't a member of any leagues yet.
|
|
</p>
|
|
<Link
|
|
to="/leagues/new"
|
|
className="text-sm font-medium text-primary hover:underline"
|
|
>
|
|
Create your first league →
|
|
</Link>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{sorted.map((league) => (
|
|
<LeagueRow key={league.leagueId} {...league} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|