Segmented Bar

// Segmented Bar · syxUI · https://syxui.dev/components/chart2-segment-bar
// Free in any project. Keep this line and credit syxUI where a person can read it.

import SwiftUI

extension View {
    func formaCard(_ pad: CGFloat = 18) -> some View {
        self.padding(pad)
            .background(Color(.systemBackground), in: RoundedRectangle(cornerRadius: 20, style: .continuous))
            .overlay(RoundedRectangle(cornerRadius: 20, style: .continuous).stroke(Color.primary.opacity(0.06), lineWidth: 1))
            .shadow(color: .black.opacity(0.05), radius: 14, x: 0, y: 6)
    }
}

// 100% segmented bar
struct SegmentBar100: View {
    let segs: [(Double, Color, String)] = [(0.45, Color(red: 0.0, green: 0.47, blue: 1.0), "iOS"), (0.3, Color(red: 0.16, green: 0.66, blue: 0.40), "Android"), (0.15, Color(red: 0.55, green: 0.40, blue: 0.90), "Web"), (0.1, Color(red: 0.98, green: 0.55, blue: 0.10), "Other")]
    var body: some View {
        VStack(alignment: .leading, spacing: 14) {
            HStack { Text("Platforms").font(.system(size: 15, weight: .semibold)); Spacer(); Text("48.2k users").font(.system(size: 12)).foregroundStyle(.secondary) }
            GeometryReader { g in
                HStack(spacing: 2) { ForEach(Array(segs.enumerated()), id: \.offset) { _, s in Rectangle().fill(s.1).frame(width: g.size.width * s.0 - 2) } }
            }.frame(height: 14).clipShape(Capsule())
            HStack(spacing: 14) { ForEach(Array(segs.enumerated()), id: \.offset) { _, s in HStack(spacing: 5) { Circle().fill(s.1).frame(width: 8, height: 8); Text(s.2).font(.system(size: 11)).foregroundStyle(.secondary) } } }
        }.formaCard().frame(width: 320)
    }
}