Product Banner with Overlay

import SwiftUI

struct ProductBannerWOverlayTitleFavorite: View {
    
    // YOu can download the image here: https://drive.google.com/file/d/1GVdHPmkFmwQ1-DAh2k6kUv1HVDk0toIA/view?usp=sharing
    
    @State private var isFavorite: Bool = false
    
    var body: some View {
        Image("sportcar")
            .resizable()
            .scaledToFill()
            .frame(width: 200, height: 140)
            .overlay(alignment: .top) {
                HStack {
                    Text("Ultradon 3000")
                    Spacer()
                    Button {
                        isFavorite.toggle()
                    } label: {
                        Image(systemName: "heart")
                            .symbolVariant(isFavorite ? .fill : .none)
                    }
                    .buttonStyle(PlainButtonStyle())
                }
                .font(.caption)
                .fontWeight(.medium)
                .foregroundStyle(.white)
                .padding(.horizontal, 8)
                .padding(.vertical, 4)
                .background(.ultraThinMaterial.opacity(0.8))
            }
            .clipShape(.rect(cornerRadius: 8))

    }
}

#Preview {
    ProductBannerWOverlayTitleFavorite()
}