No Cards

// No Cards · syxUI · https://syxui.dev/components/es-wallet
// Free in any project. Keep this line and credit syxUI where a person can read it.

import SwiftUI

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

func emptyState(_ icon: String, _ tint: Color, _ title: String, _ subtitle: String, cta: String? = nil, outline: Bool = false) -> some View {
    VStack(spacing: 14) {
        Image(systemName: icon).font(.system(size: 34)).foregroundStyle(tint).frame(width: 82, height: 82).background(tint.opacity(0.12), in: Circle())
        VStack(spacing: 5) {
            Text(title).font(.system(size: 17, weight: .semibold)).multilineTextAlignment(.center)
            Text(subtitle).font(.system(size: 14)).foregroundStyle(.secondary).multilineTextAlignment(.center)
        }
        if let cta {
            Text(cta).font(.system(size: 15, weight: .semibold)).foregroundStyle(outline ? tint : .white).padding(.horizontal, 22).padding(.vertical, 11)
                .background { if outline { Capsule().stroke(tint, lineWidth: 1.5) } else { Capsule().fill(tint) } }
        }
    }
    .padding(.horizontal, 24).padding(.vertical, 30).frame(width: 300)
    .background(Color(.systemBackground), in: RoundedRectangle(cornerRadius: 20, style: .continuous))
    .overlay(RoundedRectangle(cornerRadius: 20, style: .continuous).stroke(Color.primary.opacity(0.06), lineWidth: 1))
    .shadow(color: .black.opacity(0.05), radius: 12, y: 5)
}

struct EmptyWallet: View { var body: some View { emptyState("wallet.pass", esBlue, "No cards yet", "Add a card to your wallet.", cta: "Add Card") } }