Timeline Steps

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

import SwiftUI

extension View {
    func formaCard(_ pad: CGFloat = 18) -> some View {
        self.padding(pad)
            .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: 14, x: 0, y: 6)
    }
}

// Expandable timeline step
struct AccTimeline: View {
    @State private var open = 1
    let steps = [("Order placed", "Jul 20, 9:41 AM", "We received your order."),
                         ("Shipped", "Jul 21, 2:10 PM", "Your package left our warehouse via express courier."),
                         ("Out for delivery", "Jul 23", "Arriving today before 5 PM.")]
    let green = Color(red: 0.16, green: 0.66, blue: 0.40)
    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            ForEach(Array(steps.enumerated()), id: \.offset) { i, s in
                VStack(alignment: .leading, spacing: 3) {
                    HStack {
                        Text(s.0).font(.system(size: 15, weight: .medium))
                        Spacer()
                        Text(s.1).font(.system(size: 12)).foregroundStyle(.secondary)
                    }
                    if open == i { Text(s.2).font(.system(size: 13)).foregroundStyle(.secondary).fixedSize(horizontal: false, vertical: true) }
                }
                .frame(maxWidth: .infinity, alignment: .leading)
                .padding(.leading, 26)
                .padding(.bottom, i < steps.count - 1 ? 20 : 0)
                .overlay(alignment: .topLeading) {
                    VStack(spacing: 0) {
                        Circle().fill(i <= 1 ? green : Color.primary.opacity(0.2)).frame(width: 12, height: 12).padding(.top, 3)
                        if i < steps.count - 1 {
                            Rectangle().fill(Color.primary.opacity(0.12)).frame(width: 2).frame(maxHeight: .infinity)
                        }
                    }.frame(width: 12)
                }
                .contentShape(Rectangle()).onTapGesture { open = open == i ? -1 : i }
            }
        }.formaCard(16).frame(width: 320)
    }
}