Story Rings

// Story Rings · syxUI · https://syxui.dev/components/media-story-rings
// 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)
}

// Story rings
struct StoryRingsCard: View {
    var body: some View {
        HStack(spacing: 16) {
            ForEach(0..<4, id: \.self) { i in
                VStack(spacing: 6) {
                    Circle().fill(mediaGradient(i)).frame(width: 60, height: 60)
                        .overlay(Text(["AK", "JD", "MR", "SL"][i]).font(.system(size: 18, weight: .semibold)).foregroundStyle(.white))
                        .padding(3)
                        .overlay(Circle().stroke(AngularGradient(colors: [.pink, .orange, .purple, .pink], center: .center), lineWidth: 2.5))
                    Text(["Ava", "Jon", "Mia", "Sam"][i]).font(.system(size: 11)).foregroundStyle(.secondary)
                }
            }
        }
    }
}