How to Implement Dynamic Island in SwiftUI

// ─────────────────────────────────────────────────
// 1. SHARED (compile into App target AND Widget Extension)
// DeliveryAttributes.swift
// ─────────────────────────────────────────────────
import ActivityKit
import Foundation

struct DeliveryAttributes: ActivityAttributes {
    // Dynamic — changes during the activity
    struct ContentState: Codable, Hashable {
        var status: String
        var eta: Date
        var driverName: String
    }
    // Static — set at request time, never changes
    let orderID: String
    let restaurantName: String
}

// ─────────────────────────────────────────────────
// 2. WIDGET EXTENSION TARGET
// DeliveryLiveActivity.swift
// ─────────────────────────────────────────────────
import SwiftUI
import WidgetKit

struct DeliveryLiveActivity: Widget {
    var body: some WidgetConfiguration {
        ActivityConfiguration(for: DeliveryAttributes.self) { context in

            // Lock Screen / StandBy / Notification banner
            HStack(spacing: 12) {
                Image(systemName: "bag.fill")
                    .font(.title2)
                    .foregroundStyle(.orange)
                VStack(alignment: .leading, spacing: 2) {
                    Text(context.attributes.restaurantName)
                        .font(.headline)
                    Text(context.state.status)
                        .font(.subheadline)
                        .foregroundStyle(.secondary)
                }
                Spacer()
                Text(context.state.eta, style: .timer)
                    .font(.title2.monospacedDigit())
                    .foregroundStyle(.orange)
            }
            .padding()
            .activityBackgroundTint(.orange.opacity(0.12))
            .activitySystemActionForegroundColor(.orange)

        } dynamicIsland: { context in
            DynamicIsland {

                // ── Expanded (user long-presses the island) ──
                DynamicIslandExpandedRegion(.leading) {
                    Image(systemName: "bag.fill")
                        .font(.title)
                        .foregroundStyle(.orange)
                        .padding(.leading, 4)
                }
                DynamicIslandExpandedRegion(.trailing) {
                    VStack(alignment: .trailing, spacing: 2) {
                        Text("ETA")
                            .font(.caption2)
                            .foregroundStyle(.tertiary)
                        Text(context.state.eta, style: .timer)
                            .font(.headline.monospacedDigit())
                            .foregroundStyle(.orange)
                    }
                    .padding(.trailing, 4)
                }
                DynamicIslandExpandedRegion(.center) {
                    Text(context.state.status)
                        .font(.headline)
                        .lineLimit(1)
                }
                DynamicIslandExpandedRegion(.bottom) {
                    HStack {
                        Label(context.state.driverName, systemImage: "person.fill")
                            .font(.caption)
                            .foregroundStyle(.secondary)
                        Spacer()
                        Text(context.attributes.orderID)
                            .font(.caption2)
                            .foregroundStyle(.tertiary)
                    }
                    .padding(.bottom, 4)
                }

            } compactLeading: {
                // ── Compact left (shown when one app owns the island) ──
                Image(systemName: "bag.fill")
                    .foregroundStyle(.orange)

            } compactTrailing: {
                // ── Compact right ──
                Text(context.state.eta, style: .timer)
                    .font(.caption2.monospacedDigit())
                    .foregroundStyle(.orange)
                    .frame(width: 40)

            } minimal: {
                // ── Minimal (two competing activities — shown as small circle) ──
                Image(systemName: "bag.fill")
                    .foregroundStyle(.orange)
            }
            .keylineTint(.orange)
            .contentMargins(.horizontal, 8, for: .expanded)
        }
    }
}

// ─────────────────────────────────────────────────
// 3. MAIN APP TARGET
// DeliveryTracker.swift
// ─────────────────────────────────────────────────
import ActivityKit
import Foundation

@MainActor
class DeliveryTracker: ObservableObject {
    private var activity: Activity<DeliveryAttributes>?

    func start(orderID: String, restaurant: String, driverName: String) {
        guard ActivityAuthorizationInfo().areActivitiesEnabled else { return }
        let attributes = DeliveryAttributes(orderID: orderID, restaurantName: restaurant)
        let initialState = DeliveryAttributes.ContentState(
            status: "Order confirmed",
            eta: .now.addingTimeInterval(1800),
            driverName: driverName
        )
        do {
            activity = try Activity.request(
                attributes: attributes,
                content: .init(state: initialState, staleDate: nil),
                pushType: nil          // use .token for push-based updates
            )
        } catch {
            print("Live Activity error: \(error)")
        }
    }

    func update(status: String, eta: Date) async {
        guard let activity else { return }
        let updatedState = DeliveryAttributes.ContentState(
            status: status,
            eta: eta,
            driverName: activity.content.state.driverName
        )
        await activity.update(.init(state: updatedState, staleDate: nil))
    }

    func end() async {
        await activity?.end(
            .init(state: activity!.content.state, staleDate: nil),
            dismissalPolicy: .after(.now.addingTimeInterval(5))
        )
    }
}

// ─────────────────────────────────────────────────
// 4. PREVIEW (Widget Extension target)
// ─────────────────────────────────────────────────
#Preview("Compact",
    as: .dynamicIsland(.compact),
    using: DeliveryAttributes(orderID: "#1042", restaurantName: "Burrito Bros")
) {
    DeliveryLiveActivity()
} contentStates: {
    DeliveryAttributes.ContentState(
        status: "On the way",
        eta: .now.addingTimeInterval(600),
        driverName: "Alex"
    )
}