Live Card

// Live Card · syxUI · https://syxui.dev/components/media2-live
// Free in any project. Keep this line and credit syxUI where a person can read it.

import SwiftUI

// Live stream card
struct LiveCard: View {
    var body: some View {
        ZStack(alignment: .topLeading) {
            Image("photo_travel").resizable().scaledToFill().frame(width: 300, height: 180).clipped()
            LinearGradient(colors: [.black.opacity(0.4), .clear], startPoint: .top, endPoint: .center)
            HStack(spacing: 6) { Circle().fill(.white).frame(width: 6, height: 6); Text("LIVE").font(.system(size: 11, weight: .bold)).foregroundStyle(.white) }.padding(.horizontal, 8).padding(.vertical, 4).background(Color(red: 0.90, green: 0.24, blue: 0.28), in: Capsule()).padding(12)
            HStack(spacing: 4) { Image(systemName: "eye.fill").font(.system(size: 10)); Text("2.4K").font(.system(size: 12, weight: .semibold)) }.foregroundStyle(.white).padding(.horizontal, 8).padding(.vertical, 4).background(.black.opacity(0.5), in: Capsule()).frame(width: 300, height: 180, alignment: .topTrailing).padding(.top, 12).padding(.trailing, 12)
        }.frame(width: 300, height: 180).clipShape(RoundedRectangle(cornerRadius: 18, style: .continuous))
    }
}