mirror of
https://github.com/AmanTahiliani/box-box.git
synced 2026-08-07 19:56:18 -04:00
feat(#73): Adaptive Weekend shell and responsive navigation
Implemented by claude via .agents/dev dispatch.
This commit is contained in:
49
frontend/src/components/weekend/PreSessionView.tsx
Normal file
49
frontend/src/components/weekend/PreSessionView.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
import { Link } from '@tanstack/react-router'
|
||||
import { ChevronRight } from 'lucide-react'
|
||||
import type { WeekendContext } from '../../types'
|
||||
import { RacePreviewPage } from '../../pages/RacePreviewPage'
|
||||
import { CountdownDisplay, Flag, SeasonNavStrip, SessionTimeline } from './shared'
|
||||
|
||||
/**
|
||||
* PreSessionView folds the race preview surface into the Weekend home so there is
|
||||
* no separate Preview destination. It reuses the existing preview page content and
|
||||
* frames it with the next-session countdown and compact season navigation.
|
||||
*/
|
||||
export function PreSessionView({ context, now }: { context: WeekendContext; now: Date }) {
|
||||
const next = context.next_event
|
||||
const nextStart = context.next_session?.date_start ?? next?.next_session_start ?? next?.date_start
|
||||
|
||||
return (
|
||||
<div className="wk-pre" data-testid="weekend-pre-session" data-state={context.state}>
|
||||
<div className="wk-eyebrow mono" data-testid="wk-eyebrow">Pre-session</div>
|
||||
|
||||
{next && (
|
||||
<header className="wk-pre-head" data-testid="wk-pre-head">
|
||||
<div className="wk-event-id">
|
||||
<Flag code={next.country_code} flag={next.country_flag} />
|
||||
<h1 className="wk-sessions-title">{next.meeting_name}</h1>
|
||||
</div>
|
||||
<div className="wk-pre-countdown">
|
||||
<span className="wk-next-label mono">
|
||||
{context.next_session?.session_name ?? next.next_session_name ?? 'Next session'}
|
||||
</span>
|
||||
<CountdownDisplay target={nextStart} now={now} />
|
||||
</div>
|
||||
<Link to="/live" className="wk-cta wk-cta-ghost" data-testid="wk-pre-live">
|
||||
Live timing <ChevronRight size={14} aria-hidden="true" />
|
||||
</Link>
|
||||
</header>
|
||||
)}
|
||||
|
||||
{context.sessions && context.sessions.length > 0 && <SessionTimeline sessions={context.sessions} />}
|
||||
|
||||
<div className="wk-pre-preview" data-testid="wk-pre-preview">
|
||||
<RacePreviewPage />
|
||||
</div>
|
||||
|
||||
{context.season_rounds && context.season_rounds.length > 0 && (
|
||||
<SeasonNavStrip rounds={context.season_rounds} />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user