// Sporda — Session 4 · Phase A: 16 power-user features as composable components. // Each export pair: the component (often with states), and // the artboard that displays the component + its variants on a // clean canvas. Composition examples (b) go inside their feature-specific // example screens at the bottom of this file. const { useState: useS } = React; // ----- thin reusable artboard for component galleries -------------------- // Wraps demo content in a phone-width sheet so it sits well in the canvas. const ComponentArtboard = ({ title, subtitle, children }) => (
Component
{title}
{subtitle &&
{subtitle}
}
{children}
); const StateLabel = ({ children }) => (
{children}
); // =========================================================================== // 076 — MATCH COUNTDOWN WIDGET // =========================================================================== const Countdown = ({ d, h, m, s, label = 'Kick-off in' }) => (
{label}
{[['D', d], ['H', h], ['M', m], ['S', s]].map(([u, v], i) => (
{String(v).padStart(2, '0')} {u} {i < 3 && :}
))}
); const CountdownDemo = () => (
2-day fixture
Imminent (≤1 hour) — pulses
In-app preview · embedded into Home
Arsenal vs Liverpool · Sat 21:00
 ); // =========================================================================== // 077 — LIVE-NOW STICKY BANNER (in tab bar / under header) // =========================================================================== const LiveNowBanner = ({ count = 3, jump = true }) => (
{count} followed match{count === 1 ? '' : 'es'} live
Arsenal · Lakers · F1 Monaco GP
{jump && }
); const LiveNowBannerDemo = () => (
3 live (default)
1 live (singular copy)
Composed · Home below header
Sunday afternoon
Ben Rascals
); // =========================================================================== // 078 — GOAL REACTIONS SHEET (🔥 💀 🐐) — emoji used only because part of UX // =========================================================================== const REACTIONS = [ { e: '🔥', lbl: 'Fire', count: 248, mine: true }, { e: '🐐', lbl: 'GOAT', count: 102 }, { e: '😱', lbl: 'Shock', count: 64 }, { e: '💀', lbl: 'Skull', count: 38 }, { e: '👏', lbl: 'Clap', count: 27 }, { e: '🤡', lbl: 'Clown', count: 12 }, ]; const GoalReactBar = ({ rs = REACTIONS }) => (
{rs.map(r => ( ))}
); const GoalReactDemo = () => (
Default (Fire active)
Composed · Event row in Match · Events
J. Okonkwo · 67'
Atlas FC · second goal
 ); // =========================================================================== // 079 — SHARE-AS-IMAGE FRAME — branded card for export // =========================================================================== const ShareImageFrame = ({ variant = 'scoreline' }) => (
{/* Brand mark */}
Sporda
LIVE {variant === 'scoreline' && (
ARS
3:1
LIV
67' · Emirates · Premier League · MW 13
)} {variant === 'stat' && (
Saka · 12 chances created
Most by an Arsenal player in a single PL match since 2008.
)}
); const ShareImageDemo = () => (
Scoreline (5:4)
Stat callout (5:4)
Square (Instagram 1:1)
 ); // =========================================================================== // 080 — LONG-PRESS TEAM QUICK-ACTION SHEET // =========================================================================== const QuickActions = ({ team = { name: 'Arsenal', code: 'ARS', bg: '#EF0107' } }) => (
{/* Team chip */}
{team.name}
Premier League · 2nd
{[ { icon: , lbl: 'Follow', meta: '+ Goal alerts' }, { icon: , lbl: 'Customize alerts', meta: 'Goals · Lineups · Final' }, { icon: , lbl: 'Add next match to calendar', meta: 'Sat 21:00 vs LIV' }, { icon: , lbl: 'Share', meta: 'Send team page' }, { icon: , lbl: 'Mute', meta: 'Hide from feed for 24h', danger: true }, ].map(a => ( ))}
); const LongPressDemo = () => (
Default
Already followed (Follow → Unfollow)
L.A. Lakers
Following · 142 alerts sent
 ); // =========================================================================== // 081 — ADD-TO-CALENDAR SHEET // =========================================================================== const AddToCal = () => (
Arsenal vs Liverpool
Sat 28 May · 21:00 · Emirates
{[ { svc: 'Apple Calendar', glyph: '', bg: '#FFFFFF', fg: '#000' }, { svc: 'Google Calendar', glyph: 'G', bg: '#1A73E8', fg: '#FFF' }, { svc: 'Outlook', glyph: 'O', bg: '#0078D4', fg: '#FFF' }, { svc: 'Download .ics', glyph: '⤓', bg: 'var(--bg-inset)', fg: 'var(--text-primary)' }, ].map(s => ( ))}
Set reminder · 15 min before
); const AddToCalDemo = () => ( ); // =========================================================================== // 082 — TAP-SCORE xG FLIP CARD // =========================================================================== const XgFlipCard = () => { const [flipped, setFlipped] = useS(false); return (
setFlipped(!flipped)} style={{ position: 'relative', width: '100%', height: '100%', transformStyle: 'preserve-3d', transition: 'transform 0.5s cubic-bezier(0.2,0,0,1)', transform: flipped ? 'rotateY(180deg)' : 'rotateY(0deg)', cursor: 'pointer', }}> {/* Front — scoreline */}
Tap to flip · xG view
ARS
3:1
LIV
{/* Back — xG */}
Tap to flip back · Expected goals (xG)
ARS
2.4
xG
LIV
1.6
); }; const XgFlipDemo = () => (
Interactive (tap to flip)
 ); // =========================================================================== // 083 — AI "FOR YOU" DIGEST CARD // =========================================================================== const AIDigestCard = ({ size = 'normal' }) => (
✦
For you · digest
just now
Arsenal beat Liverpool 3–1 at the Emirates. Saka created 12 chances, the most by any PL player this weekend. Saliba returned from injury after 6 matches out.
{size !== 'compact' && (
SA
Bukayo Saka · 12 chances, 2 assists
)}
Auto-generated · sources: Opta, BBC Sport
); const AIDigestDemo = () => (
Normal
Compact (in carousel)
 ); // =========================================================================== // 084 — RIVALRY / DERBY SPLASH // =========================================================================== const RivalrySplash = () => (
The North London Derby · Premier League
Arsenal
vs Tottenham
3rd · 28 pts
SAT
17:30
5th · 22 pts
Head to head · ARS leads 87–55 across all competitions.
); const RivalryDemo = () => ( ); // =========================================================================== // 085 — STREAK + ACHIEVEMENTS // =========================================================================== const StreakChip = ({ days = 14, today = true }) => (
🔥 {days} day streak
); const Achievement = ({ icon, name, prog, max, unlocked }) => (
{icon}
{name}
{prog !== undefined && (
)}
{prog}/{max}
); const StreakDemo = () => (
Streak chip (today extended)
Streak chip (yesterday — needs to check in)
Achievement grid
} name="100 matches watched" prog={142} max={100} unlocked/> } name="Notification king" prog={50} max={50} unlocked/> } name="Predicted 10 in a row" prog={4} max={10}/> } name="Followed 25 teams" prog={8} max={25}/> } name="Shared 50 scorelines" prog={12} max={50}/> } name="100 reactions" prog={37} max={100}/>
); // =========================================================================== // 086, 087, 088 — Followed *managers* (Teams, Players, Leagues) // =========================================================================== const FollowManagerRow = ({ entity, type }) => (
{type === 'player' ? (
{entity.name.split(' ').map(n => n[0]).join('').slice(0, 2)}
) : type === 'league' ? (
{entity.code}
) : ( )}
{entity.name}
{entity.meta}
{entity.live && }
); const ManagerScreen = ({ title, sub, items, type }) => (
} title={title} right={}/> {/* Followed only filter */}
{sub}
Followed only
{/* Reorder hint */}
Drag to reorder · top {type === 'team' ? 'teams' : type === 'player' ? 'players' : 'leagues'} prioritized in your feed.
{items.map(e => )}
); const ScreenFolTeams = () => ; const ScreenFolPlayers = () => ; const ScreenFolLeagues = () => ; const FollowedTeamsDemo = () => ; const FollowedPlayersDemo = () => ; const FollowedLeaguesDemo = () => ; // =========================================================================== // 089 — BLOCK / MUTE LIST // =========================================================================== const ScreenBlocks = () => (
} title="Blocked & muted"/>
Muted teams · won't show in feed
{[ { name: 'Chelsea', code: 'CHE', bg: '#034694', until: '24 hours' }, { name: 'Inter', code: 'INT', bg: '#0068A8', until: 'permanently' }, ].map(t => (
{t.name}
Muted {t.until}
))}
Hidden keywords
{['spoilers', 'transfers', 'gambling', 'VAR'].map(k => (
{k}
))}
+ Add keyword
Blocked users
No blocked users. Blocked users won't be able to reply to your posts or send you DMs.
); // =========================================================================== // 090, 091 — HELP CENTER ROOT + ARTICLE // =========================================================================== const ScreenHelpRoot = () => (
} title="Help center"/>
Top topics
{[ { icon: , lbl: 'Notifications' }, { icon: , lbl: 'Account' }, { icon: , lbl: 'Watch' }, { icon: , lbl: 'Sharing' }, ].map(t => (
{t.icon}
{t.lbl}
))}
Popular articles
{[ 'Why am I not getting goal alerts?', 'How do I follow a team?', 'What does "score reveal" do?', 'Can I cast Sporda to my TV?', 'How do I delete my account?', ].map((a, i, arr) => (
{a}
))}
); const ScreenHelpArticle = () => (
} title="Article" right={}/>
Notifications

Why am I not getting goal alerts?

Updated 12 May 2026 · 2 min read
If you're not seeing alerts when a followed team scores, check these four things — in order.
  1. Open Settings → Notifications. Confirm Goal alerts is on. If it's not, this is most likely the cause.
  2. Check Quiet hours. By default, Sporda pauses alerts between midnight and 7 AM in your local time.
  3. System-level permission. iOS and Android both have a master notification switch. We open it for you from the Notifications screen.
  4. Followed list. Make sure the team you expected an alert from is on your followed list — see Followed teams in your profile.
Still stuck? Send a screenshot and we'll dig in within 24h.
Was this helpful?
); // Re-bind any earlier placeholders that lived under same names. Object.assign(window, { // Components (Phase A primary deliverables) Countdown, LiveNowBanner, GoalReactBar, ShareImageFrame, QuickActions, AddToCal, XgFlipCard, AIDigestCard, RivalrySplash, StreakChip, Achievement, FollowManagerRow, ManagerScreen, // Demo artboards CountdownDemo, LiveNowBannerDemo, GoalReactDemo, ShareImageDemo, LongPressDemo, AddToCalDemo, XgFlipDemo, AIDigestDemo, RivalryDemo, StreakDemo, FollowedTeamsDemo, FollowedPlayersDemo, FollowedLeaguesDemo, ScreenBlocks, ScreenHelpRoot, ScreenHelpArticle, // Aliases per IA labels ScreenCountdown: CountdownDemo, ScreenLiveOverlay: LiveNowBannerDemo, ScreenGoalReact: GoalReactDemo, ScreenShareImage: ShareImageDemo, ScreenLongPress: LongPressDemo, ScreenAddCal: AddToCalDemo, ScreenXGFlip: XgFlipDemo, ScreenAIDigest: AIDigestDemo, ScreenRivalry: RivalryDemo, ScreenStreak: StreakDemo, });