AppleRemoteDemo.swift

// https://twitter.com/jsngr/status/1282116429152751617

import SwiftUI

struct AppleRemote: View {
    var body: some View {
        VStack(spacing: 24) {
            Text("Apple TV")
                .font(.headline)

            FourWayArrowPad()

            HStack(spacing: 24) {
                VStack(spacing: 16) {
                    RemoteButton(icon: "mic.fill")
                    RemoteButton(icon: "playpause.fill")
                }

                Text("MENU")
                    .font(.headline)
                    .frame(width: 144, height: 144)
                    .background(Color(UIColor.secondarySystemBackground))
                    .cornerRadius(144)

                VStack(spacing: 16) {
                    RemoteButton(icon: "tv")
                    RemoteButton(icon: "magnifyingglass")
                }
            }
        }
        .frame(width: 330)
    }
}

struct FourWayArrowPad: View {
    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: 40, style: .continuous)
                .fill(Color(UIColor.secondarySystemBackground))
            VStack {
                Image(systemName: "chevron.up")
                    .font(.largeTitle)
                    .foregroundColor(.primary)
                Spacer()
                Image(systemName: "chevron.down")
                    .font(.largeTitle)
                    .foregroundColor(.primary)
            }
            .padding()
            HStack {
                Image(systemName: "chevron.left")
                    .font(.largeTitle)
                    .foregroundColor(.primary)
                Spacer()
                Image(systemName: "chevron.right")
                    .font(.largeTitle)
                    .foregroundColor(.primary)
            }
            .padding()
        }
        .aspectRatio(contentMode: .fit)
    }
}


struct RemoteButton: View {
    var icon: String

    var body: some View {
        VStack {
            Image(systemName: icon)
        }
        .frame(width: 64, height: 64)
        .background(Color(UIColor.secondarySystemBackground))
        .cornerRadius(32)
    }
}

struct AppleRemoteDemo_Previews: PreviewProvider {
    static var previews: some View {
        AppleRemote()
    }
}