SwiftUI FeedBack | Rating Emoji

SwiftUI FeedBack | Rating Emoji

ContentView.swift

 
//
//  ContentView.swift
//  SwiftUIProject
//
//  Created by Cairocoders
//

import SwiftUI

struct ContentView: View {
    
    @State var show = false
    
    var body: some View {
        
        HStack(spacing: 20){
            VStack(alignment: .leading,spacing: 12){
                Button(action: {
                    self.show.toggle()
                }) {
                    Image("feedback")
                        .resizable().frame(width: 300, height: 150)
                }
            }
        }.sheet(isPresented: $show) {
            feedback()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

feedback.swift

 
//
//  feedback.swift
//  SwiftUIProject
//
//  Created by Cairocoders
//

import SwiftUI

struct feedback: View {
    
    let reactions = ["😣" , "☹️" , "😐" , "🙂" , "😍"]
    @State var selectedEmoji: String = ""
    
    @State private var text = "Your Feedback"
    
    var body: some View {
        ZStack {
            Color("Color1")
                .ignoresSafeArea()
            VStack {
                HStack {
                    Text("Cairocoders")
                    Spacer()
                    Text("Your feedback")
                        .font(.title)
                }.padding(.bottom, 10)
                
                Divider()
                
                VStack {
                    Text("We would like your feedback to imporve our service")
                        .font(.system(size: 19))
                        .foregroundColor(Color.blue)
                        .multilineTextAlignment(.center)
                    Text("it will help us to serve you better")
                        .font(.system(size: 16))
                        .foregroundColor(Color.blue)
                        .padding(.top,5)
                    
                    HStack(alignment: .center, spacing: 10){
                        ForEach(reactions , id: \.self) { reaction in
                            ZStack {
                                emojiView(selectedEmoji: $selectedEmoji, emojiText: reaction)
                                    .frame(width: 50 , height: 50)
                                    .background(Color.white)
                                    .overlay(
                                            Circle()
                                                .stroke(Color.init(red: 236/255, green: 61/255, blue: 107/255), lineWidth: selectedEmoji == reaction ? 6 : 0)
                                    )
                                    .cornerRadius(25)
                                    .shadow(color: Color.init(red: 0, green: 0, blue: 0, opacity: 0.1) , radius: 10 , x: 0 , y: 15)
                                    .opacity(selectedEmoji == "" || selectedEmoji == reaction ? 1 : 0.5)
                                if selectedEmoji == reaction {
                                    Image("check")
                                        .resizable()
                                        .frame(width: 20, height: 20)
                                        .offset(x: 18, y: -18)
                                }
                            }
                        }
                    } //: HSTACK
                    .padding(.top , 20)
                    .padding(.bottom, 20)
                    
                    if selectedEmoji != "" {
                        Text(getResponseWithEmoji(selectedEmoji))
                            .font(.system(size: 17))
                            .foregroundColor(Color.pink)
                    }
                } //end VStack
                
                Text("Please leave your feedback below:")
                
                Divider()
                
                VStack {
                   TextEditor(text: $text)
                     .frame(width: 300, height: 120)
                     .lineSpacing(10)
                     .autocapitalization(.words)
                     .disableAutocorrection(true)
                     .padding()
                                        
                }.overlay(
                         RoundedRectangle(cornerRadius: 25)
                           .stroke(Color.yellow, lineWidth: 5)
                         )
                .padding()
  
                
                Button {
                    
                } label: {
                    ZStack {
                        Capsule()
                            .fill(Color.pink)
                            .frame(width: 160, height: 45)
                        
                        Text("Send feedBack")
                            .font(.system(size: 20))
                            .foregroundColor(Color.white)
                        
                    }
                    .opacity(selectedEmoji == "" ? 0.7 : 1)
                }
            }
            .padding(30)
            .frame(width: 370)
            .background(Color.white)
            .cornerRadius(20)
            .shadow(color: Color.init(red: 0, green: 0, blue: 0, opacity: 0.1) , radius: 20 , x: 10 , y: 20)
        }
    }
    
    func getResponseWithEmoji(_ emoji: String) -> String {
        switch selectedEmoji {
        case "😣":
            return "Not satisfied"
        case "☹️":
            return "Somewhat satisfied"
        case "😐":
            return "Satisfied"
        case "🙂":
            return "Very satisfied"
        case "😍":
            return "Satisfied enought to tell others"
        default:
            return ""
        }
    }
}

struct feedback_Previews: PreviewProvider {
    
    static var previews: some View {
        feedback()
    }
}

emojiView.swift

 
//
//  emojiView.swift
//  SwiftUIProject
//
//  Created by Cairocoders
//

import SwiftUI

struct emojiView: View {
    @Binding var selectedEmoji: String
    var emojiText: String
    
    var body: some View {
        Button {
            withAnimation(.spring(response:0.3, dampingFraction: 0.5)){
                selectedEmoji = emojiText
            }
            
        } label:{
            Text(emojiText)
                .font(Font.custom("Avenir", size: 23))
        }
    }
}