ControlCenter.swift

import SwiftUI
import PlaygroundSupport

struct ToggleView: View {
    @Binding var name: String
    @Binding var symbolSystemName: String
    @Binding var enabled : Bool
    @Binding var highlightCol : UIColor
    @Binding var expanded : Bool
    
    var body: some View {
            Button(action: {
                withAnimation(.easeInOut(duration: 0.15)) {
                    self.enabled.toggle()
                }
            }) {
                VStack {
                    Ellipse()
                        .foregroundColor(Color(self.enabled ? self.highlightCol : UIColor.tertiarySystemGroupedBackground))
                        .overlay(Image(systemName: self.symbolSystemName))
                        
                        .frame(width: 52, height: 52)
                    if self.expanded {
                        Text(self.name).font(.caption).fontWeight(.semibold)
                        .frame(width: 52)
                    }
                }
            }
            .buttonStyle(PlainButtonStyle())
        }
}

struct Toggle {
    var name = "Toggle"
    var systemSymbolName = "toggle"
    var enabled = false
    var highlightCol = UIColor.systemRed
}

struct ToggleGrid: View {
    @State private var isExpanded = false
    @State private var spacing: CGFloat = 12
    
    @State var plane = Toggle(name: "Airplane Mode", systemSymbolName: "airplane", enabled: false, highlightCol: UIColor.systemOrange)
    
    @State var wifi = Toggle(name: "WiFi Network", systemSymbolName: "wifi", enabled: true, highlightCol: UIColor.systemBlue)
    
    @State var notif = Toggle(name: "Notifications", systemSymbolName: "bell.fill", enabled: false, highlightCol: UIColor.systemPink)
    
    @State var dnd = Toggle(name: "Do Not Disturb", systemSymbolName: "moon.fill", enabled: false, highlightCol: UIColor.systemIndigo)
    
    @State var cellular = Toggle(name: "Cellular Data", systemSymbolName: "antenna.radiowaves.left.and.right", enabled: false, highlightCol: UIColor.systemGreen)
    
    @State var alarm = Toggle(name: "Alarm", systemSymbolName: "alarm.fill", enabled: true, highlightCol: UIColor.systemRed)
    
    var body: some View {
        Color(UIColor.systemGroupedBackground)
            .overlay( 
                HStack(alignment: .top, spacing: self.spacing) {
                    VStack(spacing: self.spacing) {
                        ToggleView(name: $plane.name, symbolSystemName: $plane.systemSymbolName, enabled: $plane.enabled, highlightCol: $plane.highlightCol, expanded: $isExpanded)
                
                        ToggleView(name: $notif.name, symbolSystemName: $notif.systemSymbolName, enabled: $notif.enabled, highlightCol: $notif.highlightCol, expanded: $isExpanded)
                    }
                    
                    VStack(spacing: self.spacing) {
                        ToggleView(name: $cellular.name, symbolSystemName: $cellular.systemSymbolName, enabled: $cellular.enabled, highlightCol: $cellular.highlightCol, expanded: $isExpanded)
                        
                        ToggleView(name: $alarm.name, symbolSystemName: $alarm.systemSymbolName, enabled: $alarm.enabled, highlightCol: $alarm.highlightCol, expanded: $isExpanded)
                    }
            
                    VStack(spacing: self.spacing) {
                        ToggleView(name: $wifi.name, symbolSystemName: $wifi.systemSymbolName, enabled: $wifi.enabled, highlightCol: $wifi.highlightCol, expanded: $isExpanded)
                
                        ToggleView(name: $dnd.name, symbolSystemName: $dnd.systemSymbolName, enabled: $dnd.enabled, highlightCol: $dnd.highlightCol, expanded: $isExpanded)
                    }
                }
                .padding(self.spacing)
                .background(Color(UIColor.secondarySystemGroupedBackground))
                .cornerRadius(24)
                .onTapGesture {
                    if !self.isExpanded {
                        withAnimation(.easeInOut(duration: 0.125)) {
                            self.spacing = 24
                            self.isExpanded = true
                        }
                    }
                })
            .onTapGesture {
                if self.isExpanded { 
                    withAnimation(.easeInOut(duration: 0.125)) {
                        self.isExpanded = false
                        self.spacing = 12
                    }
                }
        }
    }
}

struct MultiCC : View {
    var body : some View {
        HStack {
            VStack {
                ToggleGrid()
                ToggleGrid()
            }
            VStack {
                ToggleGrid()
                ToggleGrid()
            }
        }
    }
}

struct ContentView : View {
    var body: some View {
        NavigationView {
            VStack { 
                ToggleGrid()
                Spacer()
                NavigationLink(destination: Text("Second View")) {
                    Image(systemName: "person.circle")
                    .padding()
                }
                
            }
        .navigationBarTitle("Mockup")
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}



PlaygroundPage.current.setLiveView(ContentView())