10 — Patterns
Patterns
Composite UI patterns specific to CPSL products — the live scoreboard widget, match card states, alert system, and the full authentication flow. All built from the shadcn component layer.
Live Scoreboard Widget — Live Component
Live Match
CPSL Premiership
LIVE 72'
CF
CFA3–1
RR
RLHPossessionPossession
54%46%
Half Time
CPSL Cup
HT
DU
DUR0–2
TF
TFCUpcoming
CPSL League
UPCOMING
GF
GFCVS3:00 PM
WS
WSStsx
import { ScoreboardWidget } from "@/components/cpsl/ScoreboardWidget"
<ScoreboardWidget
home={{ name: "Charlotte FC Academy", shortName: "CFA", score: 3 }}
away={{ name: "Raleigh Railhawks U19", shortName: "RLH", score: 1 }}
status="live"
minute={72}
competition="CPSL Premiership"
/>Match Card States — Live Components
Upcoming
Sat 1 Mar·CPSL Premiership
UPCOMINGCF
CFA3:00 PM
DUR
DU
Matthews Sportsplex
Full Time — WIN
Sat 22 Feb·CPSL Premiership
WINCF
CFA2–0
RLH
RR
Full Time — LOSS
Sun 16 Feb·CPSL Cup
LOSSTF
TFC3–1
CFA
CF
Draw
Sat 8 Feb·CPSL League
DRAWGF
GFC1–1
WSS
WS
Live Match
·CPSL Cup
LIVE 38'DU
DUR0–1
TFC
TF
Postponed
Sat 1 Feb·CPSL League
PPDOB
OBK0–0
AVL
AC
tsx
import { MatchCard } from "@/components/cpsl/MatchCard"
// Upcoming
<MatchCard
home={{ name: "Charlotte FC", shortName: "CFA" }}
away={{ name: "Durham United", shortName: "DUR" }}
status="upcoming"
date="Sat 1 Mar"
kickoff="3:00 PM"
venue="Matthews Sportsplex"
/>
// Full-time with result
<MatchCard
home={{ name: "Charlotte FC", shortName: "CFA", score: 2 }}
away={{ name: "Raleigh Railhawks", shortName: "RLH", score: 0 }}
status="fulltime"
perspectiveTeam="home"
date="Sat 22 Feb"
/>Alert System — CPSL Semantic Alerts
Season Registration Open
Club registration for the 2025–26 CPSL Premiership season is now open. Deadline is April 30.
Club Approved
Charlotte FC Academy has been approved for admission to the CPSL Premiership. Welcome to the league.
Compliance Review Required
Your club's insurance documents expire in 14 days. Upload updated certificates before the deadline.
Match Result Disputed
The result of the Feb 22 match has been marked as disputed and is under review by the CPSL committee.
Auth — Sign In Form
Welcome back
Sign in to CPSL Portal
Forgot password?
or
Error State
Please enter a valid email address
Two-Factor Authentication
We sent a 6-digit code to coach@charlottefc.com
4
8
2
—
—
—
Resend code in 0:42