SimpleTabView with SwiftUI

TabView.swift

import SwiftUI

struct ContentView: View {

    var body: some View {
        MyTabView(
            tabContents: [
                .init(id: 0, title: "foo", content: PageView(title: "foo", color: .yellow)),
                .init(id: 1, title: "bar", content: PageView(title: "bar", color: .red)),
                .init(id: 2, title: "baz", content: PageView(title: "baz", color: .brown)),
                .init(id: 3, title: "qux", content: PageView(title: "qux", color: .purple)),
                .init(id: 4, title: "quux", content: PageView(title: "quux", color: .gray)),
            ]
        )
    }
}

struct PageView: View {
    var title: String
    var color: Color
    var body: some View {
        VStack(spacing: 0) {
            Text(title)
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(color)
        }
    }
}

struct MyTabView<Content: View>: View {
    @State var selection: Int = 0
    var tabContents: [TabContent<Content>]

    var body: some View {
        VStack(spacing: 0) {
            MyTabBarView(
                tabBars: tabContents.map {($0.id, $0.title )},
                selection: $selection
            )
            .frame(height: 44)
            TabContentsView(
                selection: $selection,
                tabContents: tabContents
            )
        }
    }
}

struct TabContent<Content: View>: Identifiable {
    var id: Int
    var title: String
    var content: Content
}

struct MyTabBarView: View {
    var tabBars: [(id: Int, title: String)]
    @Binding var selection: Int

    var body: some View {
        HStack {
            ForEach(tabBars, id: \.id) { tabBar in
                Button {
                    selection = tabBar.id
                } label: {
                    HStack {
                        Text("\(tabBar.title)")
                        Text("\(tabBar.id)")
                    }
                    .foregroundColor(.black)
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .padding(8)
                    .background(
                        Group {
                            selection == tabBar.id ? Color.green : Color.white
                        }
                    )
                }
            }
        }
    }
}

struct TabContentsView<Content: View>: View {
    @Binding var selection: Int
    var tabContents: [TabContent<Content>]

    var body: some View {
        TabView(selection: $selection) {
            ForEach(tabContents) { tabContent in
                tabContent.content
            }
        }
        .tabViewStyle(.page(indexDisplayMode: .never))
        .animation(.easeInOut, value: selection)
    }
}

#Preview {
    ContentView()
}