SwiftUI Grocery App UI

SwiftUI Grocery App UI
ContentView.swift

//
//  ContentView.swift
//  swiftuidev15ios
//
//  Created by Cairocoders
//

import SwiftUI

struct ContentView: View {
    
    @State var selected = "Home"
    
    var body: some View {
        
        NavigationView{
            VStack{
                if self.selected == "Home"{
                    Home()
                }
                else if self.selected == "Wishlist"{
                    GeometryReader{_ in
                        Text("Wishlist")
                    }
                }
                else{
                    GeometryReader{_ in
                        Text("Cart")
                    }
                }
                CustomTabView(selected: $selected)
            }
            .navigationBarTitle("")
            .navigationBarHidden(true)
            .navigationBarBackButtonHidden(true)
        }
    }
}

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

struct CustomTabView : View {
    
    @Binding var selected : String
    
    var body : some View{
        HStack{
            ForEach(tabs,id: \.self){i in
                VStack(spacing: 10){
                    
                    Capsule()
                        .fill(Color.clear)
                        .frame(height: 5)
                        .overlay(
                            Capsule().fill(self.selected == i ? Color("Color") : Color.clear).frame(width: 55, height: 5)
                         )
                    
                    Button(action: {
                        self.selected = i
                    }) {
                        VStack{
                            Image(i).renderingMode(.original)
                            Text(i).foregroundColor(.black)
                        }
                    }
                }
            }
        }.padding(.horizontal)
    }
}

Home.swift

//
//  Home.swift
//  swiftuidev15ios
//
//  Created by Cairocoders
//

import SwiftUI

struct Home : View {
    
    @State var txt = ""
    
    var body : some View{
        
        VStack(spacing: 15){
            HStack(spacing: 12){
                Image("photo1").renderingMode(.original).resizable().frame(width: 30, height: 30)
                Text("Cairocoders").font(.body)
                
                Spacer()
                
                Button(action: {
                }) {
                    Image(systemName: "cart").renderingMode(.original)
                }
            }

            ScrollView(.vertical, showsIndicators: false) {
                VStack(spacing: 15){
                    HStack(spacing: 15){
                        HStack{
                            Image(systemName: "magnifyingglass").font(.body)
                            TextField("Search Groceries", text: $txt)
                        }.padding(10)
                        .background(Color("Color1"))
                        .cornerRadius(20)
                        
                        Button(action: {
                        }) {
                            Image(systemName: "mic").renderingMode(.original)
                        }
                    }
                    
                    Image("banner")
                        .resizable()
                        .frame(height: 170)
                        .cornerRadius(10)
                        .overlay(
                            VStack{
                                Spacer()
                                HStack{
                                    Text("GET 30% OFF").font(.title).foregroundColor(.white)
                                    Spacer()
                                }.padding()
                            }
                        )
                    
                    HStack{
                        Text("Categories").font(.title)
                        
                        Spacer()
                        
                        Button(action: {
                        }) {
                            Text("More")
                        }.foregroundColor(Color("Color"))
                        
                    }.padding(.vertical, 15)
                    
                    ScrollView(.horizontal, showsIndicators: false) {
                        HStack(spacing: 15){
                            ForEach(categories,id: \.self){i in
                                VStack{
                                    Image(i).renderingMode(.original)
                                    Text(i)
                                }
                            }
                        }
                    }

                    HomeBottomView()
                }
            }
        }//end VStack
        .padding(.horizontal)
        .background(Color.white)
    }
}

struct Home_Previews: PreviewProvider {
    static var previews: some View {
        Home()
    }
}


struct HomeBottomView : View {
    
    var body : some View{
        
        VStack(spacing: 15){
            HStack{
                Text("Deal of the Day").font(.title)
                
                Spacer()
                
                Button(action: {
                }) {
                    Text("More")
                }.foregroundColor(Color("Color"))
                
            }.padding(.vertical, 15)
            
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 15){
                    ForEach(dealoftheday){i in
                        DealCellView(data: i)
                    }
                }
            }
            
            HStack{
                Text("Popular").font(.title)
                Spacer()
            }.padding(.vertical, 15)
            
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 15){
                    ForEach(recipeitems){i in
                        PopularCellView(data: i)
                    }
                }
            }
        } //End VStack
    }
}

struct DealCellView : View {
    
    var data : deal
    @State var show = false
    
    var body : some View{
        ZStack{
            NavigationLink(destination: Detail(show: self.$show, viewdata: data), isActive: self.$show) {
                Text("")
            }
            VStack(spacing: 10){
                Image(data.image).resizable().scaledToFill().frame(width: 150, height: 150).cornerRadius(10)
                    
                Text(data.name).fontWeight(.semibold)
                Text(data.price).foregroundColor(.green).fontWeight(.semibold)
            }.onTapGesture {
                self.show.toggle()
            }
        }
    }
}

struct PopularCellView : View {
    
    var data : popular

    var body : some View{
        ZStack{
            VStack(spacing: 10){
                Image(data.image).resizable().scaledToFill().frame(width: 150, height: 150).cornerRadius(10)
                
                Text(data.name).fontWeight(.semibold)
                Text(data.price).foregroundColor(.green).fontWeight(.semibold)
            }
        }
    }
}

Detail.swift

//
//  Detail.swift
//  swiftuidev15ios
//
//  Created by Cairocoders
//

import SwiftUI

struct Detail : View {
    
    @Binding var show : Bool
    @State var count = 0
    let viewdata : deal
    
    var body : some View{
        
        VStack(spacing: 0){
            Image(viewdata.image)
                .resizable()
                .frame(height: UIScreen.main.bounds.height / 2.5)
                .edgesIgnoringSafeArea(.top)
                .overlay(
                    VStack{
                        HStack(spacing: 12){
                            Button(action: {
                                self.show.toggle()
                            }) {
                                Image(systemName: "arrow.left").renderingMode(.original)
                            }
                            
                            Spacer()
                            
                            Button(action: {
                            }) {
                                Image(systemName: "tray.and.arrow.down.fill").renderingMode(.original)
                            }
                            
                            Button(action: {
                            }) {
                                Image(systemName: "heart").renderingMode(.original)
                            }
                        }.padding()
                        
                        Spacer()
                    }
                )// End Overlay
            
            ScrollView(.vertical, showsIndicators: false) {
                VStack(alignment: .leading,spacing: 15){
                    Text(viewdata.name).font(.title)
                    
                    Text(viewdata.price).foregroundColor(.green)
                    
                    Divider().padding(.vertical, 15)
                    
                    HStack{
                        Text(viewdata.name)
                        
                        Spacer()
                        
                        Button(action: {
                        }) {
                            Image(systemName: "message.and.waveform").renderingMode(.original)
                        }
                    }
                    
                    Text("Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.").foregroundColor(.gray)
                    
                    HStack(spacing: 20){
                        Spacer(minLength: 12)
                        Button(action: {
                            self.count += 1
                        }) {
                            Image(systemName: "plus.circle").font(.largeTitle)
                        }.foregroundColor(.green)
                        
                        Text("\(self.count)")
                        
                        Button(action: {
                            if self.count != 0{
                                self.count -= 1
                            }
                        }) {
                            Image(systemName: "minus.circle").font(.largeTitle)
                        }.foregroundColor(.green)
                        
                        Button(action: {
                        }) {
                            Text("Add to Cart").padding()
                        }.foregroundColor(.white)
                        .background(Color("Color"))
                        .cornerRadius(12)
                        
                        Spacer(minLength: 12)
                    }
                }
                
            }.padding()
            .background(RoundedCorner().fill(Color.white))
            .padding(.top, -80)
            
            .navigationBarTitle("")
            .navigationBarHidden(true)
            .navigationBarBackButtonHidden(true)
            
        }
    }
}

struct Detail_Previews: PreviewProvider {
    @State static var show = false
    static var previews: some View {
        Detail(show: $show, viewdata: deal(id: 1, name: "Banana", price: "5 / kg", image: "1"))
    }
}

struct RoundedCorner : Shape {
    
    func path(in rect: CGRect) -> Path {
        
        let path = UIBezierPath(roundedRect: rect, byRoundingCorners: [.topLeft,.topRight], cornerRadii: CGSize(width: 35, height: 35))
        
        return Path(path.cgPath)
    }
}

Model.swift

//
//  Model.swift
//  swiftuidev15ios
//
//  Created by Cairocoders
//

import SwiftUI

var tabs = ["Home","Wishlist","Cart"]

var categories = ["Fruits","Vegetables","Beverages","Meat","Breads"]

struct deal : Identifiable {
    
    var id : Int
    var name : String
    var price : String
    var image : String
}

struct popular : Identifiable {
    
    var id : Int
    var name : String
    var price : String
    var image : String
}

var dealoftheday = [
    deal(id: 0, name: "Strawberry", price: "5.00 / kg",image: "1"),
    deal(id: 1, name: "Pineapples", price: "3.00 / kg",image: "2"),
    deal(id: 2, name: "Banana", price: "3.00 / pack",image: "4")
]

var recipeitems = [
    popular(id: 0, name: "Apple", price: "2.99 / kg",image: "3"),
    popular(id: 1, name: "Salad", price: "4.99 / pack",image: "5"),
    popular(id: 2, name: "Broccoli", price: "5.69",image: "6")
]