SwiftUI Lists and Navigation displays a list of SF Simbles

SwiftUI Lists and Navigation displays a list of SF Simbles

simple app that displays a list of SF Simbles, tapping on any of the SF Simbles will let you navigate to a different view showing details

 
//
//  ContentView.swift
//  Devapp
//
//  Created by Cairocoders
//

import SwiftUI

struct ContentView: View {
    
    private let SFsimbleList: [SFsimbleItem] = [
        SFsimbleItem(
        sfsimble: "photo.tv",
        name: "Photo Tv",
        description: "SF Symbols provides a set of over 1,500 consistent, highly configurable symbols you can use in your app. Apple designed SF Symbols to integrate seamlessly with the San Francisco system font."),
        SFsimbleItem(
        sfsimble: "display.2",
        name: "Display",
        description: "SF Symbols provides a set of over 1,500 consistent, highly configurable symbols you can use in your app. Apple designed SF Symbols to integrate seamlessly with the San Francisco system font."),
        SFsimbleItem(
        sfsimble: "server.rack",
        name: "Server Rack",
        description: "SF Symbols provides a set of over 1,500 consistent, highly configurable symbols you can use in your app. Apple designed SF Symbols to integrate seamlessly with the San Francisco system font."),
        SFsimbleItem(
        sfsimble: "iphone",
        name: "Iphone",
        description: "SF Symbols provides a set of over 1,500 consistent, highly configurable symbols you can use in your app. Apple designed SF Symbols to integrate seamlessly with the San Francisco system font."),
        SFsimbleItem(
        sfsimble: "applewatch",
        name: "Apple watch",
        description: "SF Symbols provides a set of over 1,500 consistent, highly configurable symbols you can use in your app. Apple designed SF Symbols to integrate seamlessly with the San Francisco system font."),
        SFsimbleItem(
        sfsimble: "earpods",
        name: "Earpods",
        description: "SF Symbols provides a set of over 1,500 consistent, highly configurable symbols you can use in your app. Apple designed SF Symbols to integrate seamlessly with the San Francisco system font."),
    ]
    
    var body: some View {

        NavigationView {
            List(SFsimbleList) { SFsimbleItem in
              NavigationLink(destination: DetailsView(SFsimbleItem: SFsimbleItem)) {
                HStack {
                    SFSimbleView(SFsimbleItem: SFsimbleItem)
                    
                    Text(SFsimbleItem.name)
                        .font(.headline)
                }.padding(7)
              }
            }
            .navigationBarTitle("SF Symbols in SwiftUI")
        }
    }
}

struct DetailsView: View {

  let SFsimbleItem: SFsimbleItem
  
  var body: some View {
    VStack(alignment: .leading) {
      HStack {
        SFSimbleView(SFsimbleItem: SFsimbleItem)
          .padding(.trailing, 5)
        
        Text(SFsimbleItem.name)
          .font(.largeTitle)
          .bold()
        
        Spacer()
      }
      
      Text(SFsimbleItem.description)
        .padding(.top)
      
      Spacer()
    }
    .padding()
    .navigationBarTitle(Text(SFsimbleItem.name), displayMode: .inline)
  }
}

struct SFSimbleView: View {
  let SFsimbleItem: SFsimbleItem
  
  var body: some View {
    ZStack {
        Image(systemName: SFsimbleItem.sfsimble).foregroundColor(.red)
            .font(.system(size: 40))
            .shadow(radius: 3)
    }
  }
}

struct SFsimbleItem: Identifiable {
  let id = UUID()
  let sfsimble: String
  let name: String
  let description: String
}

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