Highlighted Accordion

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

import SwiftUI

// Colored / highlighted-when-open accordion
struct AccColored: View {
    @State private var open = 0
    let purple = Color(red: 0.55, green: 0.40, blue: 0.90)
    let qs = [("Is my data secure?", "All data is end-to-end encrypted and stored on-device."),
                      ("Can I export my data?", "Yes, export anytime as JSON or CSV.")]
    var body: some View {
        VStack(spacing: 10) {
            ForEach(Array(qs.enumerated()), id: \.offset) { i, q in
                VStack(alignment: .leading, spacing: 8) {
                    HStack {
                        Text(q.0).font(.system(size: 15, weight: .semibold)).foregroundStyle(open == i ? purple : .primary)
                        Spacer()
                        Image(systemName: open == i ? "chevron.up" : "chevron.down").font(.system(size: 12, weight: .semibold)).foregroundStyle(open == i ? purple : .secondary)
                    }
                    if open == i { Text(q.1).font(.system(size: 14)).foregroundStyle(.secondary) }
                }
                .padding(14)
                .background((open == i ? purple.opacity(0.08) : Color.primary.opacity(0.03)), in: RoundedRectangle(cornerRadius: 12, style: .continuous))
                .contentShape(Rectangle()).onTapGesture { open = open == i ? -1 : i }
            }
        }.frame(width: 330)
    }
}