Order Summary

// Order Summary · syxUI · https://syxui.dev/components/table-kv
// 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)
    }
}

/// Borderless key/value summary with an emphasized total (order summary).
struct TableKV: View {
    var body: some View {
        VStack(spacing: 12) {
            kv("Subtotal", "$248.00", false)
            kv("Shipping", "$12.00", false)
            kv("Tax", "$20.80", false)
            Divider()
            kv("Total", "$280.80", true)
        }
        .padding(18)
        .tblCard(300)
    }
    func kv(_ k: String, _ v: String, _ bold: Bool) -> some View {
        HStack {
            Text(k).font(.system(size: bold ? 16 : 14, weight: bold ? .bold : .regular)).foregroundStyle(bold ? Color.primary : Color.secondary)
            Spacer()
            Text(v).font(.system(size: bold ? 16 : 14, weight: bold ? .bold : .semibold).monospacedDigit())
        }
    }
}