Weather Card

// Weather Card · syxUI · https://syxui.dev/components/card-weather
// Free in any project. Keep this line and credit syxUI where a person can read it.

import SwiftUI

// Weather card
struct WeatherCard: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            HStack {
                VStack(alignment: .leading, spacing: 2) {
                    Text("San Francisco").font(.system(size: 16, weight: .semibold)).foregroundStyle(.white)
                    Text("Mostly Sunny").font(.system(size: 13)).foregroundStyle(.white.opacity(0.8))
                }
                Spacer()
                Image(systemName: "sun.max.fill").font(.system(size: 34)).foregroundStyle(.white, .yellow)
            }
            HStack(alignment: .top, spacing: 2) {
                Text("72").font(.system(size: 56, weight: .thin)).foregroundStyle(.white)
                Text("°").font(.system(size: 30, weight: .thin)).foregroundStyle(.white)
                Spacer()
                VStack(alignment: .trailing, spacing: 2) {
                    Text("H: 75°").font(.system(size: 13)).foregroundStyle(.white.opacity(0.9))
                    Text("L: 58°").font(.system(size: 13)).foregroundStyle(.white.opacity(0.9))
                }
            }
        }
        .padding(18).frame(width: 260)
        .background(LinearGradient(colors: [Color(red: 0.30, green: 0.62, blue: 0.95), Color(red: 0.16, green: 0.42, blue: 0.82)], startPoint: .topLeading, endPoint: .bottomTrailing), in: RoundedRectangle(cornerRadius: 22, style: .continuous))
    }
}