Info Sheet

A general purpose pop-up sheet good for quick user interactions such as onboarding or configuration


import SwiftUI

struct InfoSheetView: View {
    var body: some View {
        VStack {
            HStack {
                Spacer()
                ZStack {
                    Circle()
                        .frame(width:35,height:35)
                        .foregroundColor(.gray5)
                    Image(systemName: "xmark")
                        .font(.system(size: 15))
                        .foregroundColor(.gray12)
                    
                }
            }
            Spacer()
                .frame(height:10)
            Text("Wi-Fi Password")
                .font(.system(size: 28, weight: .bold))
                .multilineTextAlignment(.center)
                .padding(.bottom,10)
            Text("Do you want to share the Wi-Fi password for \"Home\" with Bobby?")
                .font(.system(size: 16, weight: .regular))
                .foregroundColor(.gray11)
                .multilineTextAlignment(.center)
            Spacer()
                .frame(height:30)
            Image(systemName: "wifi")
                .font(.system(size: 60))
                .foregroundColor(.blue11)
            Spacer()
                .frame(height:30)
            Button(
                action: {
                    // add action here
                },
                label: {
                    Text("Share Passsword")
                        .bold()
                        .foregroundColor(Color.black)
                        .frame(maxWidth: .infinity, minHeight: 55)
                        .background(Color.gray3) /// make the background gray
                        .cornerRadius(10) /// make the background rounded
                        .overlay( /// apply a rounded border
                            RoundedRectangle(cornerRadius: 10)
                                .stroke(Color.gray6, lineWidth: 1)
                        )
                })
        }
        .padding(.horizontal,20)

    }
}

struct InfoSheetView_Previews: PreviewProvider {
    static var previews: some View {
        InfoSheetView()
    }
}




// Hey there 👋

Join PRO to get the code for this template

You'll enjoy:
• Code for all PRO templates
• Lifetime access - Everything you see today, plus any new components and templates added in the future.
• One-time payment, no recurring subscription