Comparison Rows

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

import SwiftUI

let tblGreen = Color(red: 0.13, green: 0.62, blue: 0.32)

let tblRed = Color(red: 0.86, green: 0.24, blue: 0.21)

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

/// Two-column comparison with up / down deltas between values (Opendoor comps).
struct TableComps: View {
    let rows: [(String, String, Int, String)] = [
        ("Beds", "4", 0, "3"), ("Baths", "2", 1, "1"),
        ("Living area", "1,107 ft²", 1, "570 ft²"), ("Lot size", "11,259 ft²", -1, "41,532 ft²"),
        ("Year built", "1991", 1, "1989"),
    ]
    var body: some View {
        VStack(spacing: 0) {
            HStack {
                Text("This home").frame(maxWidth: .infinity, alignment: .leading)
                Text("Comp").frame(width: 96, alignment: .trailing)
            }
            .font(.system(size: 11, weight: .semibold)).foregroundStyle(.secondary).padding(.bottom, 10)
            ForEach(Array(rows.enumerated()), id: \.offset) { i, r in
                HStack(spacing: 6) {
                    Text(r.0).font(.system(size: 13)).foregroundStyle(.secondary).frame(width: 88, alignment: .leading)
                    if r.2 != 0 {
                        Image(systemName: r.2 > 0 ? "arrow.up" : "arrow.down")
                            .font(.system(size: 11, weight: .bold))
                            .foregroundStyle(r.2 > 0 ? tblGreen : tblRed)
                    }
                    Text(r.1).font(.system(size: 15, weight: .semibold))
                    Spacer()
                    Text(r.3).font(.system(size: 14)).foregroundStyle(.secondary)
                }
                .padding(.vertical, 12)
                if i < rows.count - 1 { Divider() }
            }
        }
        .padding(.horizontal, 16).padding(.vertical, 14)
        .tblCard(330)
    }
}