Scrollable Pills

// Scrollable Pills · syxUI · https://syxui.dev/components/nav2-scroll-pills
// Free in any project. Keep this line and credit syxUI where a person can read it.

import SwiftUI

let navBlue = Color(red: 0.0, green: 0.47, blue: 1.0)

// Scrollable top pill tabs (Gymshark)
struct ScrollPillTabs: View {
    @State private var sel = 0
    let tabs = ["Featured", "Workouts", "Plans", "Nutrition", "Recovery"]
    var body: some View {
        HStack(spacing: 8) {
            ForEach(Array(tabs.enumerated()), id: \.offset) { i, t in
                Text(t).font(.system(size: 14, weight: sel == i ? .semibold : .medium)).lineLimit(1).fixedSize().foregroundStyle(sel == i ? Color(.systemBackground) : Color.primary).padding(.horizontal, 16).padding(.vertical, 9).background(sel == i ? Color.primary : Color.primary.opacity(0.06), in: Capsule()).onTapGesture { sel = i }
            }
        }.frame(width: 380, height: 40, alignment: .leading).clipped()
    }
}