chrisp/brackt
1
1
Fork 0
Code Issues 42 Pull requests Projects Releases Packages Wiki Activity Actions 2

feat: show live draft alert banner on league page

Browse source 
Adds a pulsing yellow alert banner between the league header and content
sections when the season status is "draft", with a link to the draft room.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Chris Parsons 2026-02-27 22:57:43 -08:00
parent 1ba50828f7
commit e2ca4efc5c
1 changed files with 20 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
app/routes/leagues/$leagueId.tsx
View file

@ -98,6 +98,26 @@ export default function LeagueHome({ loaderData }: Route.ComponentProps) {
)} )}
</div> </div>
{season?.status === "draft" && (
<div className="mb-6 flex items-center justify-between gap-4 rounded-lg border border-yellow-500/50 bg-yellow-500/10 px-4 py-3 text-yellow-700 dark:text-yellow-400">
<div className="flex items-center gap-2">
<span className="relative flex h-2.5 w-2.5 shrink-0">
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-yellow-500 opacity-75" />
<span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-yellow-500" />
</span>
<span className="font-medium">Draft is live!</span>
<span className="hidden text-sm sm:inline">
Your league draft is currently in progress.
</span>
</div>
<Button asChild size="sm" variant="outline" className="shrink-0 border-yellow-500/60 text-yellow-700 hover:bg-yellow-500/20 dark:text-yellow-400">
<Link to={`/leagues/${league.id}/draft/${season.id}`}>
Enter Draft Room
</Link>
</Button>
</div>
)}
<div className="grid gap-6 md:grid-cols-3"> <div className="grid gap-6 md:grid-cols-3">
{/* Left Column - 2/3 width on desktop */} {/* Left Column - 2/3 width on desktop */}
<div className="md:col-span-2 space-y-6"> <div className="md:col-span-2 space-y-6">