Voice Message

// Voice Message · syxUI · https://syxui.dev/components/chat-voice
// Free in any project. Keep this line and credit syxUI where a person can read it.

import SwiftUI

// Voice message - waveform bubble
struct ChatVoiceMessage: View {
    let blue = Color(red: 0.0, green: 0.47, blue: 1.0)
    var body: some View {
        HStack {
            Spacer(minLength: 40)
            HStack(spacing: 10) {
                Image(systemName: "play.fill").font(.system(size: 15)).foregroundStyle(.white)
                HStack(spacing: 2.5) {
                    ForEach(0..<26, id: \.self) { i in
                        Capsule().fill(Color.white.opacity(i < 10 ? 1 : 0.5))
                            .frame(width: 2.5, height: [7.0,14,9,18,11,16,8,20,12,15].map { CGFloat($0) }[i % 10])
                    }
                }
                Text("0:07").font(.system(size: 12, weight: .medium)).foregroundStyle(.white.opacity(0.9))
            }
            .padding(.horizontal, 14).padding(.vertical, 11)
            .background(blue, in: RoundedRectangle(cornerRadius: 20, style: .continuous))
        }
    }
}