Monospace Expandable Text

import SwiftUI

struct UseTextMonospaceExpandableWBackground: View {
    
    var body: some View {
        ScrollView {
            TextMonospaceExpandableWBackground(text: "Compot is a collection of reusable SwiftUI components and templates designed for faster development of mobile apps. You can use Compot as a reference to various UI components, as a source of design inspiration, or to copy the code and use it in your projects.")
        }
        .padding()
    }
}

#Preview {
    UseTextMonospaceExpandableWBackground()
}

struct TextMonospaceExpandableWBackground: View {
    
    let text: String
    
    @State private var isExpanded: Bool = false
    @State private var showMore: Bool = false
    
    var body: some View {
        VStack {
            bannerBody
        }
        .frame(maxWidth: .infinity, alignment: .center)
        .background {
            bannerBackground
        }
        
    }
    private var bannerBody: some View {
        Text(text)
            .multilineTextAlignment(.leading)
            .truncationMode(.tail)
            .baselineOffset(3)
            .monospaced(true)
            .frame(maxWidth: 420)
            .lineLimit(isExpanded ? nil : 3)
            .background {
                ViewThatFits(in: .vertical) {
                    Text(text)
                        .hidden()
                    Color.clear
                        .onAppear {
                            showMore = true
                        }
                }
            }
            .overlay(alignment: .bottomTrailing) {
                if showMore && !isExpanded {
                    Button {
                        isExpanded = true
                    } label: {
                        HStack(alignment: .center, spacing: 0) {
                            Text("more")
                                .foregroundStyle(.accent)
                                .fontWeight(.medium)
                        }
                        .frame(width: 60, alignment: .trailing)
                        .background {
                            Rectangle()
                                .fill(LinearGradient(colors: [Color.clear, Color(UIColor.secondarySystemBackground), Color(UIColor.secondarySystemBackground), Color(UIColor.secondarySystemBackground)], startPoint: .leading, endPoint: .trailing))
                        }
                        .offset(y: -3)
                    }
                }
            }
            .font(.system(size: 14, weight: .regular))
            .padding(.horizontal, 20)
            .padding(.vertical)
    }
    
    private var bannerBackground: some View {
        RoundedRectangle(cornerRadius: 12.0, style: .continuous)
            .fill(Color(UIColor.secondarySystemBackground))
    }
}