Avatar Stack

// Avatar Stack · syxUI · https://syxui.dev/components/media-avatar-stack
// Free in any project. Keep this line and credit syxUI where a person can read it.

import SwiftUI

func mediaGradient(_ i: Int) -> LinearGradient {
    let pairs: [(Color, Color)] = [
        (Color(red: 0.98, green: 0.42, blue: 0.36), Color(red: 0.85, green: 0.18, blue: 0.22)),
        (Color(red: 0.36, green: 0.42, blue: 0.9), Color(red: 0.16, green: 0.18, blue: 0.42)),
        (Color(red: 0.2, green: 0.6, blue: 0.45), Color(red: 0.08, green: 0.3, blue: 0.24)),
        (Color(red: 0.55, green: 0.4, blue: 0.85), Color(red: 0.3, green: 0.16, blue: 0.5)),
    ]
    let p = pairs[i % pairs.count]
    return LinearGradient(colors: [p.0, p.1], startPoint: .topLeading, endPoint: .bottomTrailing)
}

// Overlapping avatar stack
struct AvatarStackCard: View {
    var body: some View {
        HStack(spacing: -14) {
            ForEach(0..<4, id: \.self) { i in
                Circle().fill(mediaGradient(i)).frame(width: 44, height: 44)
                    .overlay(Text(["A", "M", "K", "R"][i]).font(.system(size: 15, weight: .semibold)).foregroundStyle(.white))
                    .overlay(Circle().stroke(Color(.systemBackground), lineWidth: 2.5))
            }
            Circle().fill(Color.primary.opacity(0.08)).frame(width: 44, height: 44)
                .overlay(Text("+9").font(.system(size: 14, weight: .semibold)).foregroundStyle(.secondary))
                .overlay(Circle().stroke(Color(.systemBackground), lineWidth: 2.5))
        }
    }
}