AppleTVRemote.swift

import SwiftUI
import PlaygroundSupport

struct divider: View { 
    var body: some View { 
        VStack { 
            Rectangle()
                .frame(height: 1)
                .opacity(0.1)
        }
    }
}

struct optionsMenu: View { 
    var body: some View {
        VStack (spacing: 2) { 
            HStack {
                HStack (spacing: 24) { 
                    Image(systemName: "tv.fill")
                        .foregroundColor(Color.white)
                    Text("Living Room Apple TV")
                        .font(.headline)
                        .foregroundColor(Color.white)
                }
                Spacer()
                HStack { 
                    Image(systemName: "checkmark")
                        .foregroundColor(Color.white)
                }
            }
            .animation(.easeInOut(duration: 0.25))
            .padding(.top, 16)
            .padding(.bottom, 16)
            .frame(maxWidth: .infinity)
            divider()
            HStack {
                HStack (spacing: 24) { 
                    Image(systemName: "tv.fill")
                        .foregroundColor(Color.white)
                    Text("Bedroom Apple TV")
                        .font(.headline)
                        .foregroundColor(Color.white)
                }
                Spacer()
            }
            .animation(.easeInOut(duration: 0.25))
            .padding(.top, 16)
            .frame(maxWidth: .infinity)
        }
    }
}

struct ContentView: View { 
    @State var isExpanded = false
    var body: some View { 
        VStack (spacing: 24) {
            Spacer()
            VStack { 
                HStack {
                    VStack { 
                        Button(action: {
                            self.isExpanded.toggle()
                        }) {
                            Text("Living Room")
                                .font(.headline)
                                .foregroundColor(Color.white)
                        }
                    }
                    VStack { 
                        Image(systemName: "chevron.down")
                            .font(.headline)
                            .foregroundColor(Color.white)
                    }
                    .rotationEffect(self.isExpanded ? Angle(degrees: -180): Angle(degrees: 0))
                    .animation(.easeInOut(duration: 0.25))
                    .onTapGesture {
                        self.isExpanded.toggle()
                    }
                }
                HStack { 
                    if isExpanded == true { 
                        HStack { 
                            optionsMenu()
                        }
                    }
                }
                .animation(.easeInOut(duration: 0.25))
                .frame(maxWidth: .infinity)
            }
            HStack { 
                Rectangle()
                    .foregroundColor(Color(UIColor.systemBackground))
                    .cornerRadius(40)
                    .animation(.easeInOut(duration: 0.25))
            }
            HStack { 
                VStack (spacing: 16) { 
                    remoteButton(icon: "mic.fill")
                    remoteButton(icon: "playpause.fill")
                }
                Spacer()
                VStack { 
                    Text("MENU")
                        .font(.headline)
                    
                }
                .frame(width: 144, height: 144)
                .background(Color(UIColor.systemBackground))
                .cornerRadius(144)
                Spacer()
                VStack (spacing: 16) { 
                    remoteButton(icon: "tv")
                    remoteButton(icon: "magnifyingglass")
                }
            }
            Spacer()
        }
        .padding(24)
        .frame(width: 375, height: 812)
        .background(Color(UIColor.black))
    }
}

struct remoteButton: View { 
    @State var pressed = false
    var icon: String
    var body: some View { 
        VStack { 
            Image(systemName: icon)
        }
        .frame(width: 64, height: 64)
        .background(Color(UIColor.systemBackground))
        .cornerRadius(32)
        .scaleEffect(self.pressed ? 0.95 : 1.0)
        .onLongPressGesture(minimumDuration: .infinity, maximumDistance: .infinity, pressing: { pressing in
            withAnimation(.easeInOut(duration: 0.1)) {
                self.pressed = pressing
            }
        }, perform: { })
    }
}

PlaygroundPage.current.setLiveView(ContentView())