// Sporda — screen mocks for the Phase 1 design canvas. // Each Screen* component renders a 390×844 phone surface. Shared components // live at the top. Cite the inspirational reference in a comment above each. // Replace fictional teams/league copy once the real kit's screens are restored. const { useState } = React; // ----- Crest monogram placeholder ----------------------------------------- // Hash a team name to one of 6 brand-safe tints. Use until real SVG crests // are licensed. The .crest class draws the sheen overlay. const crestPalette = [ '#FF6B6B', '#4ECDC4', '#FFE66D', '#7158E2', '#3D5AFE', '#F8B400', '#22C55E', '#EC4899', '#0EA5E9', '#A855F7', ]; function hashColor(name) { let h = 0; for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) >>> 0; return crestPalette[h % crestPalette.length]; } const Crest = ({ name, code, size = 'md', bg }) => { const sz = size === 'lg' ? 'lg' : size === 'xl' ? 'xl' : ''; const txt = code || name.slice(0, 3).toUpperCase(); const color = bg || hashColor(name); return (

{txt}

); }; // ----- Lucide-ish inline icons (no external dep) -------------------------- // Hand-rolled subset; 1.75 stroke, 20px default. currentColor everywhere. const I = { search: (p) => , bell: (p) => , chevR: (p) => , chevL: (p) => , chevD: (p) => , cal: (p) => , home: (p) => , ball: (p) => , play: (p) => , playOutline: (p) => , news: (p) => , user: (p) => , more: (p) => , star: (p) => , heart: (p) => , cmt: (p) => , share: (p) => , plus: (p) => , check: (p) => , x: (p) => , trophy: (p) => , goal: (p) => , yellowCard: () => , redCard: () => , sub: (p) => , }; // ----- Phone chrome -------------------------------------------------------- const StatusBar = ({ time = '9:41' }) => ( <>

{time}

); const BottomNav = ({ active = 'home' }) => (

{[ { id: 'home', label: 'Home', icon: I.home }, { id: 'matches', label: 'Matches', icon: I.ball }, ].map(s => (

{s.label}

))}

{[ { id: 'news', label: 'News', icon: I.news }, { id: 'profile', label: 'Profile', icon: I.user }, ].map(s => (

{s.label}

))}

); // Top header — left avatar/back, center title/empty, right icons. const Header = ({ left, title, right }) => (

{left}

{title}

{right}

); // Round outlined icon button (top header) const RoundBtn = ({ children, dot }) => ( ); // ----- Match card variants ----- // MatchCardCompact: feed-row card. Inspiration: GoalLine Matches list. const MatchCardCompact = ({ league, venue, home, away, hs, as, status }) => (

{league}

{home.name}

{hs}

{status}

{as}

{away.name}

{venue &&

{venue}

}

); // MatchCardHero: featured live match. Inspiration: Eleven Beyond Arena live screen. const MatchCardHero = ({ league, group, home, away, hs, as, minute, half }) => (

{league}

LIVE

{home.name}

{hs} : {as}

{minute}' · {half}

{away.name}

{group && (

{group.map((o, i) => (

{o.lbl}

{o.v}

))}

)}

); // Multi-match tile carousel (Inspiration: GoalLine Upcomings horizontal cards) const MatchTile = ({ when, home, away }) => (

{when}

{home.code}

{away.code}

); // Make these globally available Object.assign(window, { Crest, I, StatusBar, BottomNav, Header, RoundBtn, MatchCardCompact, MatchCardHero, MatchTile, hashColor, crestPalette, });