brackt/app/components/sports/SportSeasonCard.tsx

104 lines
2.9 KiB
TypeScript

import { Link } from "react-router";
import { Badge } from "~/components/ui/badge";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "~/components/ui/card";
import { Trophy, Target, Flag } from "lucide-react";
interface SportSeasonCardProps {
leagueId: string;
sportSeasonId: string;
sportName: string;
seasonName: string;
status: "upcoming" | "active" | "completed";
scoringPattern?: string | null;
}
export function SportSeasonCard({
leagueId,
sportSeasonId,
sportName,
seasonName,
status,
scoringPattern,
}: SportSeasonCardProps) {
const getStatusBadge = () => {
switch (status) {
case "upcoming":
return (
<Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200">
<Flag className="mr-1 h-3 w-3" />
Upcoming
</Badge>
);
case "active":
return (
<Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
<Target className="mr-1 h-3 w-3" />
Active
</Badge>
);
case "completed":
return (
<Badge variant="outline" className="bg-gray-50 text-gray-700 border-gray-200">
<Trophy className="mr-1 h-3 w-3" />
Completed
</Badge>
);
}
};
const getScoringPatternLabel = () => {
if (!scoringPattern) return null;
switch (scoringPattern) {
case "single_elimination_playoff":
return "Playoff Bracket";
case "page_playoff":
return "AFL Finals";
case "season_standings":
return "Season Standings";
case "qualifying_points":
return "Qualifying Points";
default:
return null;
}
};
const scoringLabel = getScoringPatternLabel();
const isPlayoffType = scoringPattern === "single_elimination_playoff" || scoringPattern === "page_playoff";
return (
<Link to={`/leagues/${leagueId}/sports-seasons/${sportSeasonId}`}>
<Card className="hover:shadow-lg transition-shadow cursor-pointer h-full">
<CardHeader>
<div className="flex items-start justify-between">
<div className="flex-1 min-w-0">
<CardTitle className="text-lg mb-1">{sportName}</CardTitle>
<CardDescription className="truncate">{seasonName}</CardDescription>
</div>
{getStatusBadge()}
</div>
</CardHeader>
<CardContent>
<div className="space-y-2">
{scoringLabel && (
<div className="flex items-center gap-2 text-sm text-muted-foreground">
{isPlayoffType ? (
<Trophy className="h-4 w-4" />
) : (
<Target className="h-4 w-4" />
)}
<span>{scoringLabel}</span>
</div>
)}
</div>
</CardContent>
</Card>
</Link>
);
}