Banner with Action – TipKit Style

import SwiftUI

struct UseBannerWActionTipKitStyle: View {
    
    @State private var showBanner: Bool = true
    
    private func bannerAction() {
        print("Tap on the button")
    }
    
    var body: some View {
        VStack {
            if showBanner {
                BannerWActionTipKitStyle(isShowing: $showBanner, symbol: "photo.badge.plus", title: "Add New Tour", message: "You can add a new tour to your itinerary in two easy steps. Try it out, you will love it!", buttonLabel: "Get Started", action: bannerAction)
            } else {
                Button("Show Banner") {
                    showBanner = true
                }
            }
        }
        .padding()
    }
}

#Preview {
    UseBannerWActionTipKitStyle()
}

struct BannerWActionTipKitStyle: View {
    
    @Binding var isShowing: Bool
    let symbol: String
    let title: String
    let message: String
    let buttonLabel: String
    let action: () -> Void
    
    var body: some View {
        
        HStack(alignment: .top, spacing: 12) {
            Image(systemName: symbol)
                .font(.system(size: 36, weight: .regular))
                .symbolRenderingMode(.multicolor)
            VStack(alignment: .leading) {
                VStack(alignment: .leading, spacing: 4) {
                    Text(title)
                        .font(.system(size: 16, weight: .bold))
                        .foregroundStyle(.primary)
                        .multilineTextAlignment(.leading)
                    Text(message)
                        .font(.system(size: 15, weight: .regular))
                        .foregroundStyle(.secondary)
                        .multilineTextAlignment(.leading)
                }
                .padding(.trailing)
                
                Divider()
                    .padding(.bottom, 6)
                
                Button {
                    action()
                } label: {
                    Text(buttonLabel)
                        .font(.system(size: 15, weight: .bold))
                }
            }
            .padding(.bottom)
            .frame(maxWidth: 390, alignment: .topLeading)
        }
        .padding(.top)
        .padding(.leading, 12)
        .frame(maxWidth: .infinity, alignment: .topLeading)
        .background(.thinMaterial, in: RoundedRectangle(cornerRadius: 12.0, style: .continuous))
        .overlay(alignment: .topTrailing) {
            Button {
                isShowing = false
            } label: {
                Image(systemName: "xmark")
                    .font(.system(size: 16, weight: .bold))
                    .foregroundStyle(.tertiary)
            }
            .padding(.top)
            .padding(.horizontal, 12)
            .buttonStyle(.plain)
        }
    }
}