CustomSegmentControlView.swift

struct CustomSegmentControl: View {
    
    @Binding
    var selection: String
    
    private var labels: Array<String> {
        return [
            "Precautions",
            "Prework",
            "Hazards"
        ]
    }
    
    var body: some View {
        HStack {
            ForEach(labels, id: \.self){label in
                
                Button(action: {
                    selection = label
                }) {
                    Text(label)
                        .font(.subheadline.weight(.semibold))
                        .foregroundColor(selection == label ? .secondary : .white)
                        .padding()
                }
                .anchorPreference(key: SegmentControlPreferenceKey.self,
                                  value: .bounds,
                                  transform: { [
                                    SegmentControlPreference(
                                        menuLabel: label,
                                        anchor: $0
                                    )
                                  ]}
                )
            }
        }
        .padding(.vertical)
        .frame(minWidth: 0, maxWidth: .infinity)
        .backgroundPreferenceValue(SegmentControlPreferenceKey.self) { preferences in
            GeometryReader { proxy in
                if let selected = preferences.first(where: { $0.menuLabel == selection }) {
                    let frame = proxy[selected.anchor]
                    
                    
                    SegmentControlBackground()
                        .frame(width: frame.width)
                        .frame(height: frame.height)
                        .position(x: frame.midX, y: frame.midY)
                        .animation(.interpolatingSpring(stiffness: 170, damping: 15).delay(0.05), value: selection)
                }
            }
        }
        .background(
            Capsule()
                .foregroundColor(.secondary)
                .blendMode(.multiply)
        )
        .padding(.horizontal)

    }
}