Card Deck

CardStackView

import SwiftUI

struct Card: Identifiable {
    var id = UUID().uuidString
    var name: String
    var color: Color
}

var cards : [Card] = [
    Card(name:"card 1", color: .red),
    Card(name:"card 2", color: .green),
    Card(name:"card 3", color: .blue),
    Card(name:"card 4", color: .yellow)
]

struct CardStackView: View {
    @State var expandCards: Bool = false
    
    
    
    var body: some View {
        VStack(spacing: 0) {
        Text("Wallet")
                .font(.largeTitle)
                .fontWeight(.semibold)
                .frame(maxWidth: .infinity, alignment: expandCards ? .leading : .center)
                .padding(.horizontal, 15)
                .overlay(alignment: .trailing) {
                    Button {
                        withAnimation(
                            .interactiveSpring(response: 0.8, dampingFraction: 0.7, blendDuration: 0.7)) {
                            expandCards = false

                        }
                    } label: {
                        Image(systemName: "plus")
                            .foregroundColor(.white)
                            .padding(10)
                            .background(.blue, in: Circle())
                    }
                    .rotationEffect(.init(degrees:  expandCards ? 45 : 0))
                    .offset(x: expandCards ? 0 : 15)
                    .opacity(expandCards ? 1 : 0)
                }
            
            ScrollView(.vertical, showsIndicators: false) {
                VStack(spacing: 0){
                    ForEach(cards) { card in
                        CardView(card: card)

                    }
                }
                //click all content
                .overlay {
                    Rectangle()
                        .fill(.black.opacity(expandCards ? 0 : 0.01))
                        .onTapGesture {
                            withAnimation(.easeOut(duration: 0.35)) {
                                expandCards = true
                            }
                        }
                        //.padding(.top, expandCards ? 10 : 30)

                }

            }
            .coordinateSpace(name: "SCROLL")
            .offset(y: expandCards ? 10 : 30)
            
            credits
        }
        .padding()

    }
    
    
    
    @ViewBuilder
    func CardView(card: Card) -> some View {
        GeometryReader { proxy in
            
            let rect = proxy.frame(in: .named("SCROLL"))
            let offset = CGFloat(getIndex(Card: card) * ( expandCards ? 10 : 70))
            ZStack(alignment: .center) {
                RoundedRectangle(cornerRadius: 20).fill(card.color)
                Text(card.name).foregroundColor(.white).font(.headline)

            }
            //.offset(y: -rect.minY)
            .offset(y: expandCards ? offset : -rect.minY + offset)
        }
        .frame(height: 200)
    }
    
    func getIndex(Card: Card) -> Int {
        return cards.firstIndex { currentCard in
            return currentCard.id == Card.id
        } ?? 0
    }
    
    
    @ViewBuilder
    var credits: some View {
        VStack() {
            Text("make from @Kavsoft tutorial")
                    .font(.callout).foregroundStyle(.secondary)
            Text("bento.me/codelaby").font(.callout).foregroundStyle(.teal)
        }
        .padding()
        .frame(maxWidth: .infinity)
        .background(Color(UIColor.systemBackground))
    }
}

struct CardStackView_Previews: PreviewProvider {
    static var previews: some View {
        CardStackView()
    }
}