Just playing around with SwiftUI

WeatherContentView.swift

//
//  WeatherContentView.swift
//
//  Created by Leo Quinteros on 21/02/21.
//

import SwiftUI

struct CityModel: Identifiable {
    var id = UUID()
    var name: String
    var temperature: Int
}

struct WeekWeatherModel: Identifiable {
    var id = UUID()
    var dayOfWeek, imageName: String
    var temperature: Int
}

struct ContentView: View {
    
    init() {
        UIDatePicker.appearance().backgroundColor = UIColor.clear
    }
    
    @State private var isNight = false
    @State private var dateValue = Date()
    
    private var city = CityModel(name: "Cupertino, CA", temperature: 76)
    
    private var weekWeather: [WeekWeatherModel] = [
        .init(dayOfWeek: "TUE", imageName: "cloud.sun.fill", temperature: 74),
        .init(dayOfWeek: "WED", imageName: "sun.max.fill", temperature: 70),
        .init(dayOfWeek: "THU", imageName: "wind.snow", temperature: 66),
        .init(dayOfWeek: "FRI", imageName: "sunset.fill", temperature: 60),
        .init(dayOfWeek: "SAT", imageName: "moon.stars.fill", temperature: 55)
    ]
    
    var body: some View {
        ZStack {
            BackgroundView(isNight: $isNight)
            
            VStack {
                CityNameView(cityName: city.name)
                
                MainWeatherStatusView(
                    imageName: isNight ? "moon.stars.fill" : "cloud.sun.fill",
                    temperature: city.temperature)
                
                HStack {
                    ForEach(weekWeather) { day in
                        WeatherDayView(
                            dayOfWeek: day.dayOfWeek,
                            imageName: day.imageName,
                            temperature: day.temperature
                        )
                    }
                }
                
                Spacer()
                
                Button(action: {
                    isNight.toggle()
                }, label: {
                    WeatherButton(buttonText: "Change Day Time")
                })
                Spacer()
                DatePicker(
                    "Select date",
                    selection: $dateValue, in: Date()...,
                    displayedComponents: .date
                ).padding()
                Spacer()
            }
        }
    }
}

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

struct WeatherButton: View {
    
    let buttonText: String
    
    var body: some View {
        Text(buttonText)
            .frame(width: 280, height: 50)
            .background(Color.white)
            .foregroundColor(.blue)
            .font(.system(size: 20, weight: .bold))
            .cornerRadius(10)
    }
}

struct BackgroundView: View {
    
    @Binding var isNight: Bool
    
    var body: some View {
        LinearGradient(
            gradient: Gradient(colors: [
                isNight ? .black : .blue,
                isNight ? .gray :Color("lightBlue")
            ]),
            startPoint: .topLeading,
            endPoint: .bottomTrailing
        ).ignoresSafeArea()
    }
}

struct WeatherDayView: View {
    
    let dayOfWeek, imageName:  String
    let temperature: Int
    
    var body: some View {
        VStack(spacing: 10) {
            Text(dayOfWeek)
                .font(.system(size: 16, weight: .medium))
                .foregroundColor(.white)
                .padding()
            Image(systemName: imageName)
                .renderingMode(.original)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 40, height: 40)
            Text("\(temperature)°")
                .font(.system(size: 24, weight: .bold))
                .foregroundColor(.white)
                .padding()
        }
    }
}

struct CityNameView: View {
    
    let cityName: String
    
    var body: some View {
        Text(cityName)
            .font(.system(size: 32, weight: .medium))
            .foregroundColor(.white)
            .padding()
    }
}

struct MainWeatherStatusView: View {
    
    let imageName: String
    let temperature: Int
    
    var body: some View {
        VStack(spacing: 10) {
            Image(systemName: imageName)
                .renderingMode(.original)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 180, height: 180)
            
            Text("\(temperature)°")
                .font(.system(size: 70, weight: .medium))
                .foregroundColor(.white)
                .padding()
        }.padding(.bottom, 40)
    }
}