SwiftUI Contact and Details Using List and Navigation View

SwiftUI Contact and Details Using List and Navigation View

ContentView.swift

 
//
//  ContentView.swift
//  Test
//
//  Created by Cairocoders
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            List(contacts) { contact in
                NavigationLink(destination: DetailView(contact: contact)) {
                    ContactRow(contact: contact)
                }
            }
            .navigationBarTitle("Contacts")
        }
        .environment(\.colorScheme, .light)
    }
}

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

struct ContactRow: View {
    
    let contact: Contact
    
    var body: some View {
        HStack {
            Image(contact.imageName)
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width: 60, height: 60)
                .clipped()
                .cornerRadius(50)
            VStack(alignment: .leading) {
                Text(contact.name)
                    .font(.system(size: 21, weight: .medium, design: .default))
                Text(contact.phone)
            }
        }
    }
}

Contact.swift

 
//
//  Contact.swift
//  Test
//
//  Created by Cairocoders
//

import Foundation

struct Contact: Identifiable {
    let imageName: String
    let name: String
    let phone: String
    let email: String
    let office: String
    let position: String
    let age: String
    let startdate: String
    let salary: Int
    let id = UUID()
}

let contacts = [
    Contact(imageName: "photo1", name: "Airi Satou", phone: "+0123-4567896", email: "airisatou@gmail.com", office: "Tokyo", position: "Accountant", age: "25", startdate: "2008/11/28", salary: 89560),
    Contact(imageName: "photo2", name: "Angelica Ramos", phone: "+1(698)-1881047", email: "engelicaramos@gmail.com.com", office: "London", position: "Chief Executive Officer (CEO)", age: "45", startdate: "2009/10/09", salary: 58568),
    Contact(imageName: "photo3", name: "Ashton Cox", phone: "+1(234)-3442899", email: "astoncox@gmail.com", office: "San Francisco", position: "Junior Technical Author", age: "56",startdate: "2008/11/28", salary: 1560),
    Contact(imageName: "photo4", name: "Bradley Greer", phone: "+1(765)-7448466", email: "bradlyfresn@gmail.com", office: "London", position: "Software Engineer", age: "26", startdate: "2008/11/28", salary: 9960),
    Contact(imageName: "photo5", name: "Brenden Wagner", phone: "+1(213)-5115553", email: "brdndanwgner@gmail.com", office: "San Francisco", position: "Software Engineer", age: "26", startdate: "2008/11/28", salary: 8860),
    Contact(imageName: "photo6", name: "Brielle Williamson", phone: "+1(453)-0663954", email: "brillewilson@gmail.com", office: "New York", position: "Software Engineer", age: "56", startdate: "2008/11/28", salary: 8760)
]

DetailView.swift

 
//
//  DetailView.swift
//  Test
//
//  Created by Cairocoders
//

import SwiftUI

struct DetailView: View {
    
    let contact: Contact
    
    var body: some View {
        VStack {
            Image(contact.imageName)
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width: 150, height: 150)
                .clipped()
                .cornerRadius(150)
                .shadow(radius: 3)
            Text(contact.name)
                .font(.title)
                .fontWeight(.medium)
            Form {
                Section {
                    HStack {
                        Text("Phone")
                        Spacer()
                        Text(contact.phone)
                            .foregroundColor(.gray)
                            .font(.callout)
                            .frame(alignment: .leading)
                    }
                    HStack {
                        Text("Email")
                        Spacer()
                        Text(contact.email)
                            .foregroundColor(.gray)
                            .font(.callout)
                            .frame(alignment: .leading)
                    }
                    HStack {
                        Text("Office")
                        Spacer()
                        Text(contact.office)
                            .foregroundColor(.gray)
                            .font(.callout)
                            .frame(alignment: .leading)
                            
                    }
                    HStack {
                        Text("Position")
                        Spacer()
                        Text(contact.position)
                            .foregroundColor(.gray)
                            .font(.callout)
                            .frame(alignment: .leading)
                            
                    }
                    HStack {
                        Text("Age")
                        Spacer()
                        Text(contact.age)
                            .foregroundColor(.gray)
                            .font(.callout)
                            .frame(alignment: .leading)
                            
                    }
                    HStack {
                        Text("Start Date")
                        Spacer()
                        Text(contact.startdate)
                            .foregroundColor(.gray)
                            .font(.callout)
                            .frame(alignment: .leading)
                            
                    }
                    HStack {
                        Text("Salary")
                        Spacer()
                        Text("$\(contact.salary)")
                            .foregroundColor(.gray)
                            .font(.callout)
                            .frame(alignment: .leading)
                            
                    }
                }
                Section {
                    Button(action: {
                        print("Send a message")
                    }) {
                        Text("Send a message")
                    }
                    Button(action: {
                        print("Call")
                    }) {
                        Text("Call")
                    }
                }
            }
        }
        .environment(\.colorScheme, .light)
    }
}

struct DetailView_Previews: PreviewProvider {
    static var previews: some View {
        DetailView(contact: contacts[0])
            .padding(.top, 60)
    }
}