Scoreboard

// Scoreboard · syxUI · https://syxui.dev/components/table-scores
// Free in any project. Keep this line and credit syxUI where a person can read it.

import SwiftUI

extension View {
    func tblCard(_ w: CGFloat) -> some View {
        self.frame(width: w)
            .background(Color(.systemBackground), in: RoundedRectangle(cornerRadius: 18, style: .continuous))
            .clipShape(RoundedRectangle(cornerRadius: 18, style: .continuous))
            .overlay(RoundedRectangle(cornerRadius: 18, style: .continuous).stroke(Color.primary.opacity(0.08), lineWidth: 1))
            .shadow(color: .black.opacity(0.04), radius: 10, x: 0, y: 4)
    }
}

func tblBadge(_ initials: String, _ color: Color) -> some View {
    Text(initials).font(.system(size: 10, weight: .bold)).foregroundStyle(.white)
        .frame(width: 26, height: 26).background(Circle().fill(color))
}

/// Game scoreboard - two stacked team rows with crests, scores, winner arrow.
struct TableScores: View {
    let games: [(String, Color, String, String, Color, String, Bool)] = [
        ("Lakers", Color(red: 0.33, green: 0.20, blue: 0.55), "112", "Warriors", Color(red: 0.0, green: 0.40, blue: 0.70), "108", false),
        ("Celtics", Color(red: 0.05, green: 0.45, blue: 0.28), "98", "Heat", Color(red: 0.60, green: 0.10, blue: 0.20), "104", true),
    ]
    var body: some View {
        VStack(spacing: 0) {
            ForEach(Array(games.enumerated()), id: \.offset) { i, g in
                HStack(spacing: 14) {
                    Text("Final").font(.system(size: 10, weight: .bold)).foregroundStyle(.secondary).frame(width: 40, alignment: .leading)
                    VStack(spacing: 8) {
                        teamRow(g.0, g.1, g.2, !g.6)
                        teamRow(g.3, g.4, g.5, g.6)
                    }
                }
                .padding(.horizontal, 16).padding(.vertical, 12)
                if i < games.count - 1 { Divider().padding(.leading, 16) }
            }
        }
        .tblCard(320)
    }
    func teamRow(_ name: String, _ color: Color, _ score: String, _ won: Bool) -> some View {
        HStack(spacing: 10) {
            tblBadge(String(name.prefix(2)).uppercased(), color)
            Text(name).font(.system(size: 14, weight: won ? .semibold : .regular)).foregroundStyle(won ? Color.primary : Color.secondary)
            Spacer()
            Text(score).font(.system(size: 16, weight: won ? .bold : .regular).monospacedDigit()).foregroundStyle(won ? Color.primary : Color.secondary)
            Image(systemName: "arrowtriangle.left.fill").font(.system(size: 9)).foregroundStyle(won ? Color.primary : Color.clear)
        }
    }
}