Wizard Steps

// Wizard Steps · syxUI · https://syxui.dev/components/nav2-wizard
// Free in any project. Keep this line and credit syxUI where a person can read it.

import SwiftUI

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

// Numbered wizard steps
struct WizardSteps: View {
    let steps = ["Cart", "Shipping", "Payment"]
    let current = 1
    var body: some View {
        HStack(spacing: 0) {
            ForEach(Array(steps.enumerated()), id: \.offset) { i, s in
                VStack(spacing: 6) {
                    ZStack {
                        Circle().fill(i <= current ? navBlue : Color.primary.opacity(0.1)).frame(width: 30, height: 30)
                        if i < current { Image(systemName: "checkmark").font(.system(size: 12, weight: .bold)).foregroundStyle(.white) } else { Text("\(i + 1)").font(.system(size: 13, weight: .bold)).foregroundStyle(i == current ? .white : .secondary) }
                    }
                    Text(s).font(.system(size: 11, weight: i == current ? .semibold : .regular)).foregroundStyle(i <= current ? Color.primary : Color.secondary)
                }
                if i < steps.count - 1 { Rectangle().fill(i < current ? navBlue : Color.primary.opacity(0.12)).frame(height: 2).offset(y: -10) }
            }
        }.frame(width: 320)
    }
}