SwiftUI Views for the Live Activity example.

BottomView.swift

//
//  BottomView.swift
//  LiveActivity
//
//  Created by Ali Can Batur on 29.07.2022.
//

import SwiftUI

struct BottomView: View {
  
  @State var state: StatusAttribute.ContentState
  
  var body: some View {
    VStack {
      
      HStack(spacing: 0) {
        
        Text("Status:")
          .font(.system(size: 28, weight: .regular))
          .padding(.top, 36)
        
        Text(state.status.title)
          .font(.system(size: 36, weight: .medium))
          .padding(.top, 28)
          .padding(.leading, 5)
        
        Image(state.status.icon)
          .frame(width: 40, height: 40)
          .padding(.top, 30)
          .padding(.leading, 8)
      }
      .frame(maxWidth: .infinity, alignment: .leading)
      .padding(.horizontal, 20)
      
      HStack(spacing: 8) {
      
        if state.status.isDone {
          Text("Process finished.")
            .font(.system(size: 14, weight: .regular))
        } else {
          Text("Elapsed Time:")
            .font(.system(size: 14, weight: .regular))
          
          Text(state.estimatedCompletionTime, style: .timer)
            .font(.system(size: 14, weight: .medium))
        }
      }
      .frame(maxWidth: .infinity, alignment: .leading)
      .padding(.horizontal, 20)
      .padding(.bottom, 26)
    }
  }
}

StatusView.swift

//
//  StatusView.swift
//  LiveActivity
//
//  Created by Ali Can Batur on 29.07.2022.
//

import SwiftUI

struct StatusView: View {
  
  @State var attribute: StatusAttribute
  @State var state: StatusAttribute.ContentState
  
  var body: some View {
    
    ZStack {
      Color.white
      VStack(spacing: 0) {
        TopView(attribute: attribute)
        BottomView(state: state)
      }
      .activitySystemActionForegroundColor(Color.cyan)
    }
  }
}

TopView.swift

//
//  TopView.swift
//  LiveActivity
//
//  Created by Ali Can Batur on 29.07.2022.
//

import SwiftUI

struct TopView: View {
  
  @State var attribute: StatusAttribute
  
  var body: some View {
    ZStack {
      Color(hex: "EBEBEB")
      
      VStack(alignment: .leading, spacing: 8) {
        
        Text("CI/CD Process")
          .font(.system(size: 40, weight: .ultraLight))
        
        Text("Build ID: \(attribute.buildId)")
          .font(.system(size: 20, weight: .regular))
        
      }
      .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
      .padding(.horizontal, 20)
    }
    .frame(maxWidth: .infinity, alignment: .leading)
    .frame(height: 99)
    .shadow(color: .black.opacity(0.25), radius: 40, x: 0, y: 10)
    
    Rectangle()
      .fill(Color.gray.opacity(0.5))
      .frame(height: 1)
  }
}

WidgetExtension.swift

//
//  WidgetExtension.swift
//  WidgetExtension
//
//  Created by Ali Can Batur on 28.07.2022.
//

import WidgetKit
import SwiftUI
import Intents

@main
struct WidgetExtension: Widget {
  let kind: String = "WidgetExtension"
  
  var body: some WidgetConfiguration {
    ActivityConfiguration(attributesType: StatusAttribute.self) { context in
      StatusView(attribute: context.attributes, state: context.state)
    }
  }
}

struct WidgetExtension_Previews: PreviewProvider {
  static var previews: some View {
    let testAttribute = StatusAttribute(buildId: "1231231")
    let testState = StatusAttribute.ContentState(
      status: .pending,
      estimatedCompletionTime: Date()
    )
    
    StatusView(attribute: testAttribute, state: testState)
      .previewContext(
        WidgetPreviewContext(
          family: .systemLarge
        )
      )
  }
}