Health.swift

import SwiftUI
import PlaygroundSupport

struct healthRow: View { 
    var icon: String
    var category: String
    var categoryColor: Color
    var time: String
    var reading: String
    var units: String
    var body: some View { 
        VStack { 
            HStack {
                HStack { 
                    Image(systemName: icon)
                        .foregroundColor(categoryColor)
                    Text(category)
                        .font(.body)
                        .fontWeight(.semibold)
                        .foregroundColor(categoryColor)
                }
                Spacer()
                HStack { 
                    Text(time)
                        .font(.callout)
                        .foregroundColor(Color(UIColor.secondaryLabel))
                    Image(systemName: "chevron.right")
                        .font(.callout)
                        .foregroundColor(Color(UIColor.gray))
                }
            }
            Spacer()
            HStack (alignment: .firstTextBaseline, spacing: 2) {
                Text(reading)
                    .font(.system(.title, design: .rounded))
                    .fontWeight(.semibold)
                Text(units)
                    .font(.body)
                    .fontWeight(.semibold)
                    .foregroundColor(Color(UIColor.secondaryLabel))
                Spacer()
            }
        }
        .padding()
        .frame(height: 104)
        .background(Color(UIColor.secondarySystemBackground))
        .cornerRadius(14)
    }
}

struct Screen: View { 
    var body: some View {
        ScrollView {
            VStack (spacing: 32) { 
                HStack { 
                    Text("Summary")
                        .font(.largeTitle)
                        .fontWeight(.semibold)
                    Spacer()
                    Image(systemName: "person.crop.circle.fill")
                        .font(.largeTitle)
                }
                .padding(.top, 32)
                HStack (alignment: .bottom) { 
                    Text("Favorites")
                        .font(.title)
                        .fontWeight(.semibold)
                    Spacer()
                    Text("Edit")
                        .foregroundColor(Color.blue)
                        .font(.body)
                }
            }
            VStack (spacing: 16) { 
                healthRow(
                    icon: "waveform.path.ecg", 
                    category: "Blood Glucose", 
                    categoryColor: Color.pink,
                    time: "17:48",
                    reading: "136",
                    units: "mg/dL"
                )
                healthRow(
                    icon: "flame.fill", 
                    category: "Flights Climbed", 
                    categoryColor: Color.red,
                    time: "18:11",
                    reading: "8",
                    units: "floors"
                )
                healthRow(
                    icon: "heart.fill", 
                    category: "Heart Rate", 
                    categoryColor: Color.pink,
                    time: "20:43",
                    reading: "61",
                    units: "bpm"
                )
                healthRow(
                    icon: "staroflife.fill", 
                    category: "Insulin Delivery", 
                    categoryColor: Color.gray,
                    time: "20:51",
                    reading: "27.31",
                    units: "U"
                )
                healthRow(
                    icon: "flame.fill", 
                    category: "Walking + Running Distance", 
                    categoryColor: Color.red,
                    time: "22:02",
                    reading: "5.3",
                    units: "mi"
                )
                
                HStack { 
                    Text("Show All Health Data")
                        .foregroundColor(Color.blue)
                        .font(.body)
                    Spacer()
                    Image(systemName: "chevron.right")
                        .font(.callout)
                        .foregroundColor(Color(UIColor.gray))
                }
                .padding()
                .background(Color(UIColor.secondarySystemBackground))
                .cornerRadius(14)
            }
            .padding(.bottom, 32)
        }
        .padding()
        .frame(width: 375, height: 600)
        .background(Color(UIColor.systemBackground))
    }
}

PlaygroundPage.current.setLiveView(Screen())