Segmented Header

// Segmented Header · syxUI · https://syxui.dev/components/hdr-segmented
// Free in any project. Keep this line and credit syxUI where a person can read it.

import SwiftUI

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

// Title with a segmented control
struct HeaderSegmented: View {
    @State private var sel = 0
    let opts = ["Overview", "Activity", "Files"]
    var body: some View {
        VStack(alignment: .leading, spacing: 14) {
            HStack {
                Text("Project").font(.system(size: 28, weight: .bold))
                Spacer()
                Image(systemName: "plus").font(.system(size: 16, weight: .semibold)).foregroundStyle(.white).frame(width: 32, height: 32).background(hdrBlue, in: Circle())
            }
            HStack(spacing: 0) {
                ForEach(Array(opts.enumerated()), id: \.offset) { i, o in
                    Text(o).font(.system(size: 13, weight: sel == i ? .semibold : .medium)).foregroundStyle(sel == i ? Color.primary : .secondary)
                        .frame(maxWidth: .infinity).frame(height: 32)
                        .background(sel == i ? Color(.systemBackground) : .clear, in: RoundedRectangle(cornerRadius: 8))
                        .shadow(color: .black.opacity(sel == i ? 0.08 : 0), radius: 3, y: 1).padding(2)
                }
            }.background(Color.primary.opacity(0.06), in: RoundedRectangle(cornerRadius: 10))
        }.frame(width: 350)
    }
}