Design SystemPatternsSportsLiveGamesModule

LiveGamesModule

Adopted在本 repo 設計、production 已採用。站上是設計端的版本,production 實作可能已再調整。

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).

Games

Sports

View All
Q2 4:15·NBA
48
Denver Nuggets
Denver Nuggets60%
42
LA Clippers
LA Clippers40%
HT·UEFA
1
Sassuolo
Sassuolo55%
1
Como
Como45%

Esports

View All
Game 2·LCK
1
T1
T148%
2
Gen.G
Gen.G52%

Last action: —

States Matrix

Default — Sports + Esports (live + upcoming + final)

Games

Sports

View All
Q2 4:15·NBA
48
Denver Nuggets
Denver Nuggets60%
42
LA Clippers
LA Clippers40%
FINAL·NBA
112
Boston Celtics
Boston Celtics100%
98
Miami Heat
Miami Heat0%

Esports

View All
Game 2·LCK
1
T1
T148%
2
Gen.G
Gen.G52%
Feb 17, 4pm·BLAST
FaZe Clan
FaZe Clan50%
Natus Vincere
Natus Vincere50%

Sports only (Esports has no games)

Games

Sports

View All
Q2 4:15·NBA
48
Denver Nuggets
Denver Nuggets60%
42
LA Clippers
LA Clippers40%
FINAL·NBA
112
Boston Celtics
Boston Celtics100%
98
Miami Heat
Miami Heat0%

Esports only (Sports has no games)

Games

Esports

View All
Game 2·LCK
1
T1
T148%
2
Gen.G
Gen.G52%
Feb 17, 4pm·BLAST
FaZe Clan
FaZe Clan50%
Natus Vincere
Natus Vincere50%

All upcoming → broadcast icon goes tertiary

Games

Sports

View All
Feb 17, 4pm·NBA
Denver Nuggets
Denver Nuggets58%
LA Clippers
LA Clippers42%

No View All (viewAllHref undefined)

Games

Sports

Q2 4:15·NBA
48
Denver Nuggets
Denver Nuggets60%
42
LA Clippers
LA Clippers40%
FINAL·NBA
112
Boston Celtics
Boston Celtics100%
98
Miami Heat
Miami Heat0%

Esports

Game 2·LCK
1
T1
T148%
2
Gen.G
Gen.G52%
Feb 17, 4pm·BLAST
FaZe Clan
FaZe Clan50%
Natus Vincere
Natus Vincere50%

Loading skeleton (isLoading=true, sections ignored)

Games

Sports

Esports

Edge Cases

Tied score (both teams isLeading=true → both chips lit)

Games

Sports

View All
HT·UEFA
1
Team Alpha
Team Alpha50%
1
Team Beta
Team Beta50%

Long names (with shortName + truncate fallback)

Games

Sports

View All
Q4 0:05·NBA Playoffs
128
Oklahoma City Thunder
Oklahoma City Thunder62%
126
Minnesota Timberwolves
Minnesota Timberwolves38%
Feb 17, 8pm·NBA Playoffs
Indiana Pacers
Indiana Pacers45%
New York Knickerbockers
New York Knickerbockers55%

Probability missing → column hidden for that row

Games

Sports

View All
Q1 9:42·NBA
22
Phoenix Suns
Phoenix Suns
18
Sacramento Kings
Sacramento Kings

Budget overflow (6 games → trims to top 4)

Games

Sports

View All
Q2 4:15·NBA
48
Denver Nuggets
Denver Nuggets60%
42
LA Clippers
LA Clippers40%
Feb 17, 9pm·NBA
Toronto Raptors
Toronto Raptors35%
Charlotte Hornets
Charlotte Hornets65%

Esports

View All
Game 2·LCK
1
T1
T148%
2
Gen.G
Gen.G52%
Feb 17, 4pm·BLAST
FaZe Clan
FaZe Clan50%
Natus Vincere
Natus Vincere50%

Mixed empty (Esports = 0 → sub-section dropped)

Games

Sports

View All
Q2 4:15·NBA
48
Denver Nuggets
Denver Nuggets60%
42
LA Clippers
LA Clippers40%
FINAL·NBA
112
Boston Celtics
Boston Celtics100%
98
Miami Heat
Miami Heat0%

All empty → entire module hidden

(no render — sibling modules collapse upward)