Message Bubble Basic

import SwiftUI

struct UseMessageBubbleBasic: View {
    
    var body: some View {
        VStack {
            MessageBubbleBasic(msgDateTime: Date.now, msgText: "Ahoy, know Compot?", isMsgFromUser: false)
            MessageBubbleBasic(msgDateTime: Date.now, msgText: "Yeah, crazy, right! What's your favorite component?", isMsgFromUser: true)
        }
        .padding()
    }
}

#Preview {
    UseMessageBubbleBasic()
}

struct MessageBubbleBasic: View {
    var msgDateTime: Date?
    var msgText: String
    var isMsgFromUser: Bool
    
    var body: some View {
        VStack(alignment: .center, spacing: 8) {
            dateTime()
            HStack {
                text
            }
            .frame(maxWidth: .infinity, alignment: isMsgFromUser ? .trailing : .leading)
        }
        .frame(maxWidth: .infinity, alignment: .center)
        .padding(.vertical, 4)
    }
    
    @ViewBuilder
    private func dateTime() -> some View {
        if let dateTime = msgDateTime {
            Text(dateTime, format: Date.FormatStyle(date: .complete, time: .shortened))
                .font(.caption2)
                .foregroundStyle(.secondary)
        }
    }
    
    private var text: some View {
        VStack {
            Text(msgText)
                .font(.system(size: 17))
                .foregroundStyle(isMsgFromUser ? .white : .primary)
                .multilineTextAlignment(.leading)
                .padding(.horizontal, 12)
                .padding(.vertical, 8)
                .background(isMsgFromUser ? Color.blue : Color(uiColor: .secondarySystemFill))
                .clipShape(RoundedRectangle(cornerRadius: 16, style: .continuous))

        }
        .frame(maxWidth: UIScreen.main.bounds.width * 0.75, alignment: isMsgFromUser ? .trailing : .leading)
    }
}