Bordered Items

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

import SwiftUI

// Bordered accordion - each item boxed, first open
struct AccBordered: View {
    @State private var open = 0
    let qs = [("What payment methods do you accept?", "All major cards, Apple Pay and PayPal."),
                      ("Is my payment information safe?", "Payments are processed securely via Stripe; we never store card details.")]
    var body: some View {
        VStack(spacing: 12) {
            ForEach(Array(qs.enumerated()), id: \.offset) { i, q in
                VStack(alignment: .leading, spacing: 8) {
                    HStack {
                        Text(q.0).font(.system(size: 15, weight: .medium))
                        Spacer()
                        Image(systemName: "chevron.down").font(.system(size: 12, weight: .semibold)).foregroundStyle(.secondary).rotationEffect(.degrees(open == i ? 180 : 0))
                    }
                    if open == i { Text(q.1).font(.system(size: 14)).foregroundStyle(.secondary) }
                }
                .padding(15)
                .overlay(RoundedRectangle(cornerRadius: 12, style: .continuous).stroke(Color.primary.opacity(0.12), lineWidth: 1))
                .contentShape(Rectangle()).onTapGesture { open = open == i ? -1 : i }
            }
        }.frame(width: 330)
    }
}