Avatars

// Avatars · syxUI · https://syxui.dev/components/media-avatars
// 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)
}

// Avatars
struct AvatarSet: View {
    var body: some View {
        HStack(spacing: 20) {
            Circle().fill(mediaGradient(1)).frame(width: 58, height: 58)
                .overlay(Text("AK").font(.system(size: 20, weight: .semibold)).foregroundStyle(.white))
            Circle().fill(Color.primary.opacity(0.08)).frame(width: 58, height: 58)
                .overlay(Image(systemName: "person.fill").font(.system(size: 24)).foregroundStyle(.secondary))
                .overlay(alignment: .bottomTrailing) {
                    Circle().fill(Color(red: 0.2, green: 0.78, blue: 0.35)).frame(width: 16, height: 16)
                        .overlay(Circle().stroke(Color(.systemBackground), lineWidth: 2.5))
                }
            Circle().fill(mediaGradient(2)).frame(width: 52, height: 52)
                .overlay(Text("JD").font(.system(size: 18, weight: .semibold)).foregroundStyle(.white))
                .padding(4).overlay(Circle().stroke(Color.primary, lineWidth: 2))
        }
    }
}