Tab View with bottom line indicator (SwiftUI)

TabView.swift

import SwiftUI

enum TabSection: CaseIterable {
    case tab1
    case tab2

    var title: String {
        switch self {
        case .tab1:
            "Tab 1"
        case .tab2:
            "Tab 2"
        }
    }
}

struct TabView: View {
    @Binding var selectedTab: TabSection
    @Namespace private var name

    var body: some View {
        HStack(spacing: 0) {
            ForEach(TabSection.allCases, id: \.hashValue) { section in
                Button {
                    selectedTab = section
                } label: {
                    VStack {
                        Text(section.title.capitalized)
                            .font(.footnote)
                            .fontWeight(.medium)
                            .foregroundColor(selectedTab == section ? .appPrimary : Color(uiColor: .systemGray))
                        ZStack {
                            Capsule()
                                .fill(.inactiveTab)
                                .frame(height: 2)
                            if selectedTab == section {
                                Capsule()
                                    .fill(.appPrimary)
                                    .frame(height: 2)
                                    .matchedGeometryEffect(id: "Tab", in: name)
                            }
                        }
                    }
                }
            }
        }
    }
}