LiveGamesModule
Production:src/app/[locale]/trending/components/LiveGamesModule/index.tsx
Installation
import { LiveGamesModule } from "@/components/product/live-games-module/live-games-module";Overview
Sidebar discovery surface for sports / esports games, organized into category sections (Sports / Esports). Module title is always "Games"; the broadcast icon turns live-red when any rendered game is live. The whole row is the pressable target — no Trade button, no quick-buy.
Total games shown is budgeted to 4. All games across all sections are pooled, ranked by status (live → upcoming → final) then by volume descending, and the winners are regrouped back into their original categories. A category whose header includes a "View All" link is optional per section. A category that ends up with zero games after budget allocation drops out entirely (its header and "View All" disappear too). If every section is empty, the whole module renders nothing so sibling modules collapse upward — there is no empty-state placeholder.
Each game shows a pre-formatted clock/status string, a league label, a volume string, and a pair of teams. Team order is fixed: the first team takes on home color on hover, the second takes on away color. A team's short name is preferred for display when available, falling back to a truncated full name (used as the native tooltip). Scores render with tabular figures. On a tie, both teams are marked as leading so both score chips render lit. Win probability is optional per team, but only displays when both teams in a game have a value — otherwise the probability column hides for that row entirely.
Interactive Demo
Click any row to fire its onPress handler. Hover a row: teams[0] name + probability switch to home (lime); teams[1] to away (blue).
Last action: —
States Matrix
Default — Sports + Esports (live + upcoming + final)
Sports only (Esports has no games)
Games
Sports
View AllEsports only (Sports has no games)
Games
Esports
View AllAll upcoming → broadcast icon goes tertiary
Games
Sports
View AllNo View All (viewAllHref undefined)
Games
Sports
Esports
Loading skeleton (isLoading=true, sections ignored)
Games
Sports
Esports
Edge Cases
Tied score (both teams isLeading=true → both chips lit)
Games
Sports
View AllLong names (with shortName + truncate fallback)
Games
Sports
View AllProbability missing → column hidden for that row
Games
Sports
View AllBudget overflow (6 games → trims to top 4)
Mixed empty (Esports = 0 → sub-section dropped)
Games
Sports
View AllAll empty → entire module hidden
(no render — sibling modules collapse upward)