Pill Tab Bar

// Pill Tab Bar · syxUI · https://syxui.dev/components/nav2-pill-container
// Free in any project. Keep this line and credit syxUI where a person can read it.

import SwiftUI

// Bottom tab in a rounded pill container (Goodreads)
struct PillContainerTab: View {
    @State private var sel = 4
    let tabs = [("house", "Home"), ("book", "Books"), ("safari", "Discover"), ("magnifyingglass", "Search"), ("line.3.horizontal", "More")]
    var body: some View {
        HStack(spacing: 0) {
            ForEach(Array(tabs.enumerated()), id: \.offset) { i, t in
                VStack(spacing: 3) { Image(systemName: t.0).font(.system(size: 17)); Text(t.1).font(.system(size: 10)) }
                    .foregroundStyle(sel == i ? Color.primary : Color.secondary).frame(maxWidth: .infinity).padding(.vertical, 8)
                    .background(sel == i ? Color.primary.opacity(0.08) : .clear, in: RoundedRectangle(cornerRadius: 12)).onTapGesture { sel = i }
            }
        }.padding(5).background(Color.primary.opacity(0.05), in: Capsule()).frame(width: 360)
    }
}