Stories Bar

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

import SwiftUI

// Stories bar
struct StoryBar: View {
    let people = [("person_1", "You"), ("person_2", "James"), ("person_3", "Mia"), ("person_4", "Arjun")]
    var body: some View {
        HStack(spacing: 16) {
            VStack(spacing: 6) {
                ZStack { Circle().fill(Color.primary.opacity(0.06)).frame(width: 60, height: 60); Image(systemName: "plus").font(.system(size: 20)).foregroundStyle(Color(red: 0.0, green: 0.47, blue: 1.0)) }
                Text("Add").font(.system(size: 11)).foregroundStyle(.secondary)
            }
            ForEach(Array(people.enumerated()), id: \.offset) { i, p in
                VStack(spacing: 6) {
                    Image(p.0).resizable().scaledToFill().frame(width: 60, height: 60).clipShape(Circle()).padding(3).overlay(Circle().stroke(AngularGradient(colors: [.pink, .orange, .purple, .pink], center: .center), lineWidth: 2.5))
                    Text(p.1).font(.system(size: 11)).foregroundStyle(.secondary)
                }
            }
        }.frame(width: 340, alignment: .leading).clipped()
    }
}