gistfile1.txt

import SwiftUI

struct SelectedButton: View {
   @State var tabButtons = tabs[0]
   @Namespace var animation
    
    var body: some View {
        VStack {
            HStack {
                ScrollView(.horizontal, showsIndicators: false) {
                    ScrollViewReader { value in
                        LazyHStack(spacing: 20) {
                            ForEach(tabs, id: \.self) { tab in
                                    Button(action: {
                                        withAnimation(.easeInOut) {
                                            tabButtons = tab
                                        }
                                    }, label: {
                                        Text(tab)
                                            .font(tabButtons == tab ? .title2 : .title3)
                                            .foregroundColor(tabButtons == tab ? .black : .secondary)
                                            .background(
                                                ZStack {
                                                    if tabButtons == tab {
                                                        Rectangle()
                                                            .frame(height: 5)
                                                            .offset(y: 20)
                                                            .foregroundColor(.green)
                                                            .matchedGeometryEffect(id: "TAB", in: animation)
                                                    }
                                                }
                                            )
                                    })
                            }
                        }
                        .padding(.horizontal)
                        .onChange(of: tabButtons) { id in
                            withAnimation(.easeInOut) {
                                value.scrollTo(id, anchor: .center)
                            }
                        }
                        .frame(height: 50)
                    }
                }
            }
            
            if tabButtons == "Overview" {
                OverViewView()
                    .transition(.slide)
            } else if tabButtons == "Orders" {
                OrdersView()
                    .transition(.slide)
            } else if tabButtons == "Transactions" {
                TransactionsView()
                    .transition(.slide)
            } else if tabButtons == "News" {
                NewsView()
                    .transition(.slide)
            } else if tabButtons == "Contacts" {
                ContactsView()
                    .transition(.slide)
            } else {
                MyAccountView()
                    .transition(.slide)
            }
        }
    }
}

struct SelectedButton_Previews: PreviewProvider {
    static var previews: some View {
        SelectedButton()
    }
}

var tabs: [String] = ["Overview", "Orders", "Transactions", "News", "Contacts", "My Account"]

struct OverViewView: View {
    var body: some View {
        ZStack {
            Color.purple
                .opacity(0.1)
            
            VStack {
                Text("Hello Universe")
                    .font(.largeTitle)
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
        .padding(.top, 5)
    }
}

struct OrdersView: View {
    var body: some View {
        ZStack {
            Color.gray
                .opacity(0.1)
            
            VStack {
                Text("Hello World")
                    .font(.largeTitle)
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
        .padding(.top, 5)
    }
}

struct TransactionsView: View {
    var body: some View {
        ZStack {
            Color.orange
                .opacity(0.1)
            
            VStack {
                Text("Hey you!")
                    .font(.largeTitle)
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
        .padding(.top, 5)
    }
}

struct NewsView: View {
    var body: some View {
        ZStack {
            Color.green
                .opacity(0.1)
            
            VStack {
                Text("This is todays news!")
                    .font(.largeTitle)
                
                Text("The iOS community is the best community on Instagram!")
                    .font(.title2)
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
        .padding(.top, 5)
    }
}

struct ContactsView: View {
    var body: some View {
        ZStack {
            Color.red
                .opacity(0.1)
            
            VStack {
                Text("Your Contacts:")
                    .font(.largeTitle)
                
                Text("Hello!")
                    .font(.title2)
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
        .padding(.top, 5)
    }
}

struct MyAccountView: View {
    var body: some View {
        ZStack {
            Color.mint
                .opacity(0.1)
            
            VStack {
                Text("Your Balance")
                    .font(.largeTitle)
                
                Text("One million dollars!")
                    .font(.title2)
                    .padding(.top)
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
        .padding(.top, 5)
    }
}