09 — Components

Data Display, Tags & Avatars

Live standings table, stat cards, avatar system, badge taxonomy, and skeleton loading states. All built from shadcn primitives with CPSL tokens.

League Standings Table — Live Component

#ClubPWDLGDPtsForm
1
CF
Charlotte FC
181422+3044
WWDWW
2
RR
Raleigh RH
181233+1839
WLWWD
3
DU
Durham Utd
181125+1135
DWWLW
4
TF
Triangle FC
18945+831
LWDWL
5
GF
Greensboro
18837-227
WDLWL
6
WS
W-Salem SC
18657-423
DLDWD
7
AC
Asheville
185310-1618
LLWLD
8
OB
Outer Banks
182214-348
LLDLL
Promotion
Playoff
Relegation
tsx
import { StandingsTable } from "@/components/cpsl/StandingsTable"

<StandingsTable
  rows={standingsData}
  promotionZone={1}
  playoffZone={3}
  relegationZone={2}
  highlightTeam="Charlotte FC Academy"
  showForm
/>

Stat Cards — Live Components

Goals Scored48
+8 vs last season
Goals Conceded18
-5 vs last season
Clean Sheets9
+2 vs last season
League Position#1
Top of table
tsx
import { StatCard } from "@/components/cpsl/StatCard"

<StatCard
  label="Goals Scored"
  value={48}
  subLabel="+8 vs last season"
  trend="up"
/>
<StatCard
  label="Clean Sheets"
  value={9}
  subLabel="+2 vs last season"
  trend="up"
  accentColor="#BF1D2D"
/>

Avatar System — Live Components

Sizes

MJ
xs
MJ
sm
MJ
md
MJ
lg
MJ
xl

Status Indicators

MJ
online
JS
away
AT
offline
SR
live (pulsing)

With Role Label

MJ
GK
JS
CB
AT
CM
SR
ST

Avatar Group

MJ
JS
AT
SR
CL
+2
7 squad members (+2 overflow)
tsx
import { CPSLAvatar, AvatarGroup } from "@/components/cpsl/CPSLAvatar"

// Single avatar with status
<CPSLAvatar name="Marcus Johnson" status="online" size="lg" role="GK" />

// Avatar group with overflow
<AvatarGroup
  avatars={players}
  max={5}
  size="sm"
/>

Badge System — Full Taxonomy

Match Results

WINLOSSDRAWLIVEUPCOMINGPOSTPONEDCONFIRMED

League Position Zones

1ST PLACEPROMOTIONPLAYOFFRELEGATION

Club Tier

PREMIERELITEACADEMY

Base shadcn Variants

DefaultSecondaryOutlineDestructive

Skeleton Loading States

Card Skeleton

Table Skeleton