League Standings

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

import SwiftUI

let tblBlue = Color(red: 0.0, green: 0.47, blue: 1.0)

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)
    }
}

/// League standings - rank, crest, P/W/D/L, points; leader row tinted (Apple Sports / FotMob).
struct TableStandings: View {
    let rows: [(Int, String, Color, String, String)] = [
        (1, "Arsenal", Color(red: 0.87, green: 0.11, blue: 0.13), "11 8 2 1", "26"),
        (2, "Man City", Color(red: 0.42, green: 0.71, blue: 0.90), "11 7 1 3", "22"),
        (3, "Liverpool", Color(red: 0.78, green: 0.09, blue: 0.14), "11 6 2 3", "20"),
        (4, "Chelsea", Color(red: 0.10, green: 0.20, blue: 0.60), "11 6 1 4", "19"),
        (5, "Spurs", Color(red: 0.05, green: 0.09, blue: 0.30), "11 5 3 3", "18"),
    ]
    var body: some View {
        VStack(spacing: 0) {
            HStack(spacing: 0) {
                Text("#").frame(width: 22, alignment: .leading)
                Text("Team").frame(maxWidth: .infinity, alignment: .leading)
                Text("P W D L").frame(width: 84, alignment: .trailing)
                Text("PTS").frame(width: 34, alignment: .trailing)
            }
            .font(.system(size: 11, weight: .semibold)).foregroundStyle(.secondary)
            .padding(.horizontal, 14).padding(.vertical, 9)
            Divider()
            ForEach(Array(rows.enumerated()), id: \.offset) { _, r in
                HStack(spacing: 0) {
                    Text("\(r.0)").font(.system(size: 13, weight: .semibold).monospacedDigit()).frame(width: 22, alignment: .leading)
                    HStack(spacing: 8) {
                        Circle().fill(r.2).frame(width: 18, height: 18)
                        Text(r.1).font(.system(size: 14, weight: .medium))
                    }.frame(maxWidth: .infinity, alignment: .leading)
                    Text(r.3).font(.system(size: 12).monospacedDigit()).foregroundStyle(.secondary).frame(width: 84, alignment: .trailing)
                    Text(r.4).font(.system(size: 14, weight: .bold).monospacedDigit()).frame(width: 34, alignment: .trailing)
                }
                .padding(.horizontal, 14).padding(.vertical, 10)
                .background {
                    if r.0 == 1 {
                        RoundedRectangle(cornerRadius: 10, style: .continuous).fill(tblBlue.opacity(0.08)).padding(.horizontal, 6)
                    }
                }
            }
        }
        .padding(.vertical, 6)
        .tblCard(340)
    }
}