CreateWithPlay SwiftUI Challenge

ContentView.swift

//
//  ContentView.swift
//  PlayChallenge
//
//  Created by Sean Robinson on 11/23/22.
//

import SwiftUI

struct ContentView: View {
    let heroImageURL = URL(string: "https://picsum.photos/id/1/600/300")!
    let imageURL1 = URL(string: "https://picsum.photos/id/2/600/300")!
    let imageURL2 = URL(string: "https://picsum.photos/id/3/600/300")!
    let imageURL3 = URL(string: "https://picsum.photos/id/4/600/300")!
    let imageURL4 = URL(string: "https://picsum.photos/id/7/600/300")!

    @State private var date = Date.now

    var body: some View {
        VStack(spacing: 0) {
            self.hero
            ScrollView {
                ChallengeBody(cardImageURL: imageURL1, date: $date)
            }
            self.imageGrid
        }
        .edgesIgnoringSafeArea(.all)
    }

    var hero: some View {
        ResizableAsyncImage(url: heroImageURL, isClipped: true)
            .frame(height: 180)
    }

    var imageGrid: some View {
        HStack(spacing: 4) {
            ResizableAsyncImage(url: imageURL2, isClipped: true)

            VStack(spacing: 4) {
                ResizableAsyncImage(url: imageURL3, isClipped: true)
                ResizableAsyncImage(url: imageURL4, isClipped: true)
            }
        }
        .frame(height: 264)
    }
}

struct ChallengeBody: View {
    let cardImageURL: URL
    @Binding var date: Date

    var body: some View {
        VStack(alignment: .leading, spacing: 24) {
            self.title
            self.imageStack
            self.card
            self.datePicker
            self.hiddenText

        }.padding(24)
    }

    var title: some View {
        Text("Learn These Breathing Techniques")
            .font(.system(size: 34))
    }

    var imageStack: some View {
        HStack(spacing: 24) {
            Image(systemName: "wind")
            Image(systemName: "tornado")
            Image(systemName: "sun.dust")
        }
        .frame(maxWidth: .infinity, alignment: .leading)
        .font(.system(size: 22))
    }

    var card: some View {
        HStack {
            ResizableAsyncImage(url: self.cardImageURL)
                .frame(width: 80, height: 80)
                .clipped()
            Text("Discover the Benefits of This Lifehack")
                .frame(maxWidth: .infinity, alignment: .leading)
                .font(.system(size: 20))
        }
        .background(Color.orange)
        .clipShape(RoundedRectangle(cornerRadius: 8))
    }

    var datePicker: some View {
        DatePicker(selection: $date) {
            EmptyView()
        }
        .fixedSize()
        // Hack to get the alignment right... Or left.
        .padding(.leading, -8)
    }

    var hiddenText: some View {
        Text("The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compares with the size of the rest of him.")
    }
}

struct ResizableAsyncImage: View {
    let url: URL
    var isClipped = false

    var body: some View {
        Color.clear
            .overlay {
                AsyncImage(url: url) {
                    $0.resizable()
                        .aspectRatio(contentMode: .fill)

                } placeholder: {
                    Color.gray
                }
            }
            .clipped()
    }
}

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