Now Playing

// Now Playing · syxUI · https://syxui.dev/components/media2-now-playing
// Free in any project. Keep this line and credit syxUI where a person can read it.

import SwiftUI

let medGreen = Color(red: 0.16, green: 0.66, blue: 0.40)

// Full now-playing player
struct NowPlayingCard: View {
    var body: some View {
        VStack(spacing: 16) {
            Image("photo_travel").resizable().scaledToFill().frame(width: 236, height: 236).clipShape(RoundedRectangle(cornerRadius: 12, style: .continuous))
            HStack {
                VStack(alignment: .leading, spacing: 3) { Text("Golden Hour").font(.system(size: 18, weight: .bold)).foregroundStyle(.white); Text("JVKE").font(.system(size: 14)).foregroundStyle(.white.opacity(0.6)) }
                Spacer()
                Image(systemName: "heart.fill").font(.system(size: 20)).foregroundStyle(medGreen)
            }
            VStack(spacing: 4) {
                GeometryReader { g in ZStack(alignment: .leading) { Capsule().fill(.white.opacity(0.2)).frame(height: 4); Capsule().fill(.white).frame(width: g.size.width * 0.35, height: 4) } }.frame(height: 4)
                HStack { Text("1:02").font(.system(size: 11)).foregroundStyle(.white.opacity(0.5)); Spacer(); Text("-1:43").font(.system(size: 11)).foregroundStyle(.white.opacity(0.5)) }
            }
            HStack(spacing: 26) {
                Image(systemName: "shuffle").font(.system(size: 16)).foregroundStyle(.white.opacity(0.7))
                Image(systemName: "backward.fill").font(.system(size: 22)).foregroundStyle(.white)
                Image(systemName: "play.fill").font(.system(size: 24)).foregroundStyle(.black).frame(width: 58, height: 58).background(.white, in: Circle())
                Image(systemName: "forward.fill").font(.system(size: 22)).foregroundStyle(.white)
                Image(systemName: "repeat").font(.system(size: 16)).foregroundStyle(.white.opacity(0.7))
            }
        }.padding(20).frame(width: 300).background(Color(red: 0.12, green: 0.12, blue: 0.14), in: RoundedRectangle(cornerRadius: 24, style: .continuous))
    }
}