Approximate Control Center on macOS 11

ControlCenter_iOS.xcodeproj/project.pbxproj

@@ -7,19 +7,43 @@
 	objects = {
 
 /* Begin PBXBuildFile section */
-		7BBC6A2924A4EF3400306BD5 /* ControlCenter_iOSApp.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7BBC6A2824A4EF3400306BD5 /* ControlCenter_iOSApp.swift */; };
-		7BBC6A2B24A4EF3400306BD5 /* ContentView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7BBC6A2A24A4EF3400306BD5 /* ContentView.swift */; };
 		7BBC6A2D24A4EF3600306BD5 /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 7BBC6A2C24A4EF3600306BD5 /* Assets.xcassets */; };
 		7BBC6A3024A4EF3600306BD5 /* Preview Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 7BBC6A2F24A4EF3600306BD5 /* Preview Assets.xcassets */; };
+		7BBC6A5424A5ABEA00306BD5 /* App.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7BBC6A5324A5ABEA00306BD5 /* App.swift */; };
+		7BBC6A5B24A5ABF700306BD5 /* ContentView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7BBC6A5524A5ABF700306BD5 /* ContentView.swift */; };
+		7BBC6A5C24A5ABF700306BD5 /* FancyBackground.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7BBC6A5624A5ABF700306BD5 /* FancyBackground.swift */; };
+		7BBC6A5D24A5ABF700306BD5 /* WirelessControls.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7BBC6A5724A5ABF700306BD5 /* WirelessControls.swift */; };
+		7BBC6A5E24A5ABF700306BD5 /* ControlBackground.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7BBC6A5824A5ABF700306BD5 /* ControlBackground.swift */; };
+		7BBC6A5F24A5ABF700306BD5 /* DoNotDisturbControl.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7BBC6A5924A5ABF700306BD5 /* DoNotDisturbControl.swift */; };
+		7BBC6A6024A5ABF700306BD5 /* WirelessView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7BBC6A5A24A5ABF700306BD5 /* WirelessView.swift */; };
+		7BBC6A6224A5ACC500306BD5 /* KeyboardBrightnessControl.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7BBC6A6124A5ACC500306BD5 /* KeyboardBrightnessControl.swift */; };
+		7BBC6A6424A5ACD900306BD5 /* AirPlayControl.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7BBC6A6324A5ACD900306BD5 /* AirPlayControl.swift */; };
+		7BBC6A6724A5AD3700306BD5 /* DisplayControl.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7BBC6A6624A5AD3700306BD5 /* DisplayControl.swift */; };
+		7BBC6A6924A5AD5200306BD5 /* SoundControl.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7BBC6A6824A5AD5200306BD5 /* SoundControl.swift */; };
+		7BBC6A6B24A5AD7300306BD5 /* NowPlayingControl.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7BBC6A6A24A5AD7300306BD5 /* NowPlayingControl.swift */; };
+		7BBC6A6D24A5AD8100306BD5 /* BatteryControl.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7BBC6A6C24A5AD8100306BD5 /* BatteryControl.swift */; };
+		7BBC6A6F24A5AE4400306BD5 /* LightAndDarkPreviews.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7BBC6A6E24A5AE4400306BD5 /* LightAndDarkPreviews.swift */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXFileReference section */
 		7BBC6A2524A4EF3400306BD5 /* ControlCenter_iOS.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = ControlCenter_iOS.app; sourceTree = BUILT_PRODUCTS_DIR; };
-		7BBC6A2824A4EF3400306BD5 /* ControlCenter_iOSApp.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ControlCenter_iOSApp.swift; sourceTree = "<group>"; };
-		7BBC6A2A24A4EF3400306BD5 /* ContentView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ContentView.swift; sourceTree = "<group>"; };
 		7BBC6A2C24A4EF3600306BD5 /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = "<group>"; };
 		7BBC6A2F24A4EF3600306BD5 /* Preview Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = "Preview Assets.xcassets"; sourceTree = "<group>"; };
 		7BBC6A3124A4EF3600306BD5 /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
+		7BBC6A5324A5ABEA00306BD5 /* App.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = App.swift; path = /Users/sjs/Projects/ControlCenter_iOS/Sources/App.swift; sourceTree = "<absolute>"; };
+		7BBC6A5524A5ABF700306BD5 /* ContentView.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = ContentView.swift; sourceTree = "<group>"; };
+		7BBC6A5624A5ABF700306BD5 /* FancyBackground.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = FancyBackground.swift; sourceTree = "<group>"; };
+		7BBC6A5724A5ABF700306BD5 /* WirelessControls.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = WirelessControls.swift; sourceTree = "<group>"; };
+		7BBC6A5824A5ABF700306BD5 /* ControlBackground.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = ControlBackground.swift; sourceTree = "<group>"; };
+		7BBC6A5924A5ABF700306BD5 /* DoNotDisturbControl.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = DoNotDisturbControl.swift; sourceTree = "<group>"; };
+		7BBC6A5A24A5ABF700306BD5 /* WirelessView.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = WirelessView.swift; sourceTree = "<group>"; };
+		7BBC6A6124A5ACC500306BD5 /* KeyboardBrightnessControl.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = KeyboardBrightnessControl.swift; sourceTree = "<group>"; };
+		7BBC6A6324A5ACD900306BD5 /* AirPlayControl.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AirPlayControl.swift; sourceTree = "<group>"; };
+		7BBC6A6624A5AD3700306BD5 /* DisplayControl.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DisplayControl.swift; sourceTree = "<group>"; };
+		7BBC6A6824A5AD5200306BD5 /* SoundControl.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SoundControl.swift; sourceTree = "<group>"; };
+		7BBC6A6A24A5AD7300306BD5 /* NowPlayingControl.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NowPlayingControl.swift; sourceTree = "<group>"; };
+		7BBC6A6C24A5AD8100306BD5 /* BatteryControl.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BatteryControl.swift; sourceTree = "<group>"; };
+		7BBC6A6E24A5AE4400306BD5 /* LightAndDarkPreviews.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LightAndDarkPreviews.swift; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -36,7 +60,8 @@
 		7BBC6A1C24A4EF3400306BD5 = {
 			isa = PBXGroup;
 			children = (
-				7BBC6A2724A4EF3400306BD5 /* ControlCenter_iOS */,
+				7BBC6A4424A5ABBF00306BD5 /* Sources */,
+				7BBC6A4324A5AB7200306BD5 /* Resources */,
 				7BBC6A2624A4EF3400306BD5 /* Products */,
 			);
 			sourceTree = "<group>";
@@ -49,18 +74,6 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
-		7BBC6A2724A4EF3400306BD5 /* ControlCenter_iOS */ = {
-			isa = PBXGroup;
-			children = (
-				7BBC6A2824A4EF3400306BD5 /* ControlCenter_iOSApp.swift */,
-				7BBC6A2A24A4EF3400306BD5 /* ContentView.swift */,
-				7BBC6A2C24A4EF3600306BD5 /* Assets.xcassets */,
-				7BBC6A3124A4EF3600306BD5 /* Info.plist */,
-				7BBC6A2E24A4EF3600306BD5 /* Preview Content */,
-			);
-			path = ControlCenter_iOS;
-			sourceTree = "<group>";
-		};
 		7BBC6A2E24A4EF3600306BD5 /* Preview Content */ = {
 			isa = PBXGroup;
 			children = (
@@ -69,6 +82,45 @@
 			path = "Preview Content";
 			sourceTree = "<group>";
 		};
+		7BBC6A4324A5AB7200306BD5 /* Resources */ = {
+			isa = PBXGroup;
+			children = (
+				7BBC6A2C24A4EF3600306BD5 /* Assets.xcassets */,
+				7BBC6A3124A4EF3600306BD5 /* Info.plist */,
+				7BBC6A2E24A4EF3600306BD5 /* Preview Content */,
+			);
+			path = Resources;
+			sourceTree = "<group>";
+		};
+		7BBC6A4424A5ABBF00306BD5 /* Sources */ = {
+			isa = PBXGroup;
+			children = (
+				7BBC6A6524A5AD1D00306BD5 /* Controls */,
+				7BBC6A5324A5ABEA00306BD5 /* App.swift */,
+				7BBC6A5524A5ABF700306BD5 /* ContentView.swift */,
+				7BBC6A5824A5ABF700306BD5 /* ControlBackground.swift */,
+				7BBC6A5624A5ABF700306BD5 /* FancyBackground.swift */,
+				7BBC6A6E24A5AE4400306BD5 /* LightAndDarkPreviews.swift */,
+			);
+			path = Sources;
+			sourceTree = "<group>";
+		};
+		7BBC6A6524A5AD1D00306BD5 /* Controls */ = {
+			isa = PBXGroup;
+			children = (
+				7BBC6A6324A5ACD900306BD5 /* AirPlayControl.swift */,
+				7BBC6A6C24A5AD8100306BD5 /* BatteryControl.swift */,
+				7BBC6A6624A5AD3700306BD5 /* DisplayControl.swift */,
+				7BBC6A5924A5ABF700306BD5 /* DoNotDisturbControl.swift */,
+				7BBC6A6124A5ACC500306BD5 /* KeyboardBrightnessControl.swift */,
+				7BBC6A6A24A5AD7300306BD5 /* NowPlayingControl.swift */,
+				7BBC6A6824A5AD5200306BD5 /* SoundControl.swift */,
+				7BBC6A5724A5ABF700306BD5 /* WirelessControls.swift */,
+				7BBC6A5A24A5ABF700306BD5 /* WirelessView.swift */,
+			);
+			path = Controls;
+			sourceTree = "<group>";
+		};
 /* End PBXGroup section */
 
 /* Begin PBXNativeTarget section */
@@ -138,8 +190,20 @@
 			isa = PBXSourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				7BBC6A2B24A4EF3400306BD5 /* ContentView.swift in Sources */,
+				7BBC6A6D24A5AD8100306BD5 /* BatteryControl.swift in Sources */,
-				7BBC6A2924A4EF3400306BD5 /* ControlCenter_iOSApp.swift in Sources */,
+				7BBC6A6724A5AD3700306BD5 /* DisplayControl.swift in Sources */,
+				7BBC6A5B24A5ABF700306BD5 /* ContentView.swift in Sources */,
+				7BBC6A5424A5ABEA00306BD5 /* App.swift in Sources */,
+				7BBC6A5F24A5ABF700306BD5 /* DoNotDisturbControl.swift in Sources */,
+				7BBC6A6424A5ACD900306BD5 /* AirPlayControl.swift in Sources */,
+				7BBC6A5C24A5ABF700306BD5 /* FancyBackground.swift in Sources */,
+				7BBC6A6F24A5AE4400306BD5 /* LightAndDarkPreviews.swift in Sources */,
+				7BBC6A6024A5ABF700306BD5 /* WirelessView.swift in Sources */,
+				7BBC6A6B24A5AD7300306BD5 /* NowPlayingControl.swift in Sources */,
+				7BBC6A6924A5AD5200306BD5 /* SoundControl.swift in Sources */,
+				7BBC6A6224A5ACC500306BD5 /* KeyboardBrightnessControl.swift in Sources */,
+				7BBC6A5E24A5ABF700306BD5 /* ControlBackground.swift in Sources */,
+				7BBC6A5D24A5ABF700306BD5 /* WirelessControls.swift in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -268,10 +332,10 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				ASSETCATALOG_COMPILER_GLOBAL_ACCENT_COLOR_NAME = AccentColor;
 				CODE_SIGN_STYLE = Automatic;
-				DEVELOPMENT_ASSET_PATHS = "\"ControlCenter_iOS/Preview Content\"";
+				DEVELOPMENT_ASSET_PATHS = "\"Resources/Preview Content\"";
 				DEVELOPMENT_TEAM = X45WPY5JFZ;
 				ENABLE_PREVIEWS = YES;
-				INFOPLIST_FILE = ControlCenter_iOS/Info.plist;
+				INFOPLIST_FILE = "$(SRCROOT)/Resources/Info.plist";
 				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
@@ -290,10 +354,10 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				ASSETCATALOG_COMPILER_GLOBAL_ACCENT_COLOR_NAME = AccentColor;
 				CODE_SIGN_STYLE = Automatic;
-				DEVELOPMENT_ASSET_PATHS = "\"ControlCenter_iOS/Preview Content\"";
+				DEVELOPMENT_ASSET_PATHS = "\"Resources/Preview Content\"";
 				DEVELOPMENT_TEAM = X45WPY5JFZ;
 				ENABLE_PREVIEWS = YES;
-				INFOPLIST_FILE = ControlCenter_iOS/Info.plist;
+				INFOPLIST_FILE = "$(SRCROOT)/Resources/Info.plist";
 				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",

ControlCenter_iOS.xcodeproj/project.xcworkspace/contents.xcworkspacedata

@@ -1,6 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Workspace
    version = "1.0">
+   <FileRef
+      location = "group:/Users/sjs/Projects/ControlCenter_iOS/Sources/App.swift">
+   </FileRef>
    <FileRef
       location = "self:">
    </FileRef>

ControlCenter_iOS/ContentView.swift

@@ -1,20 +0,0 @@
-//
-//  ContentView.swift
-//  ControlCenter_iOS
-//
-//  Created by Sami Samhuri on 2020-06-25.
-//
-
-import SwiftUI
-
-struct ContentView: View {
-    var body: some View {
-        Text("Hello, world!").padding()
-    }
-}
-
-struct ContentView_Previews: PreviewProvider {
-    static var previews: some View {
-        ContentView()
-    }
-}

Sources/ContentView.swift

@@ -0,0 +1,44 @@
+//
+//  ContentView.swift
+//  ControlCenter_iOS
+//
+//  Created by Sami Samhuri on 2020-06-25.
+//
+
+import SwiftUI
+
+struct ContentView: View {
+    var body: some View {
+        FancyBackground {
+            VStack(alignment: .leading) {
+                HStack {
+                    WirelessControls()
+                    VStack {
+                        DoNotDisturbControl()
+                        HStack {
+                            KeyboardBrightnessControl(width: 72, height: 72)
+                            AirPlayControl(width: 72, height: 72)
+                        }
+                    }
+                }
+                DisplayControl()
+                SoundControl()
+                NowPlayingControl()
+                BatteryControl()
+            }
+            .padding()
+            .frame(maxWidth: 330)
+        }
+    }
+}
+
+struct ContentView_Previews: PreviewProvider {
+    static var previews: some View {
+        Group {
+            ContentView()
+
+            ContentView()
+                .preferredColorScheme(.dark)
+        }
+    }
+}

Sources/ControlBackground.swift

@@ -0,0 +1,49 @@
+//
+//  ControlBackground.swift
+//  ControlCenter_iOS
+//
+//  Created by Sami Samhuri on 2020-06-25.
+//
+
+import SwiftUI
+
+struct ControlBackground<Content: View>: View {
+    let bgColor: Color
+    let radius: CGFloat
+    let opacity: Double
+    let content: Content
+
+    init(
+        bgColor: Color = Color(.secondarySystemGroupedBackground),
+        radius: CGFloat = 12,
+        opacity: Double = 0.8,
+        @ViewBuilder build: () -> Content
+    ) {
+        self.bgColor = bgColor
+        self.radius = radius
+        self.opacity = opacity
+        self.content = build()
+    }
+
+    var body: some View {
+        ZStack {
+            content.hidden().overlay(
+                RoundedRectangle(cornerRadius: radius, style: .continuous)
+                    .foregroundColor(bgColor)
+                    .opacity(opacity)
+            )
+            content
+        }
+    }
+}
+
+struct ControlBackground_Previews: PreviewProvider {
+    static var previews: some View {
+        LightAndDarkPreviews {
+            ControlBackground {
+                Text("Hello")
+                    .padding()
+            }
+        }
+    }
+}

Sources/Controls/AirPlayControl.swift

@@ -0,0 +1,35 @@
+//
+//  AirPlayControl.swift
+//  ControlCenter_iOS
+//
+//  Created by Sami Samhuri on 2020-06-25.
+//
+
+import SwiftUI
+
+struct AirPlayControl: View {
+    let width: CGFloat
+    let height: CGFloat
+
+    var body: some View {
+        ControlBackground {
+            VStack {
+                Image(systemName: "airplayvideo")
+                    .foregroundColor(Color(.label).opacity(0.8))
+                Text("AirPlay Display")
+                    .font(.system(size: 10))
+                    .fontWeight(.medium)
+                    .multilineTextAlignment(.center)
+            }
+            .frame(width: width, height: height)
+        }
+    }
+}
+
+struct AirPlayControl_Previews: PreviewProvider {
+    static var previews: some View {
+        LightAndDarkPreviews {
+            AirPlayControl(width: 72, height: 72)
+        }
+    }
+}

Sources/Controls/BatteryControl.swift

@@ -0,0 +1,36 @@
+//
+//  BatteryControl.swift
+//  ControlCenter_iOS
+//
+//  Created by Sami Samhuri on 2020-06-25.
+//
+
+import SwiftUI
+
+struct BatteryControl: View {
+    var body: some View {
+        ControlBackground {
+            HStack {
+                Image(systemName: "battery.100")
+                VStack(alignment: .leading) {
+                    Text("Battery")
+                        .foregroundColor(Color(.secondaryLabel))
+                        .font(.system(size: 11))
+                        .fontWeight(.bold)
+                    Text("85%")
+                        .font(.system(size: 11))
+                        .fontWeight(.bold)
+                }
+            }
+            .padding(8)
+        }
+    }
+}
+
+struct BatteryControl_Previews: PreviewProvider {
+    static var previews: some View {
+        LightAndDarkPreviews {
+            BatteryControl()
+        }
+    }
+}

Sources/Controls/DisplayControl.swift

@@ -0,0 +1,39 @@
+//
+//  DisplayControl.swift
+//  ControlCenter_iOS
+//
+//  Created by Sami Samhuri on 2020-06-25.
+//
+
+import SwiftUI
+
+struct DisplayControl: View {
+    var body: some View {
+        ControlBackground {
+            VStack(alignment: .leading, spacing: 4) {
+                Text("Display")
+                    .font(.system(size: 12))
+                    .fontWeight(.bold)
+                HStack {
+                    Slider(value: .constant(0.04))
+                    Button(action: {}) {
+                            Image(systemName: "display")
+                                .foregroundColor(Color(.label))
+                                .frame(width: 28, height: 28)
+                                .background(Color(.systemFill))
+                                .cornerRadius(14)
+                    }
+                }
+            }
+            .padding(8)
+        }
+    }
+}
+
+struct DisplayControl_Previews: PreviewProvider {
+    static var previews: some View {
+        LightAndDarkPreviews {
+            DisplayControl()
+        }
+    }
+}

Sources/Controls/DoNotDisturbControl.swift

@@ -0,0 +1,37 @@
+//
+//  DoNotDisturbControl.swift
+//  ControlCenter_iOS
+//
+//  Created by Sami Samhuri on 2020-06-25.
+//
+
+import SwiftUI
+
+struct DoNotDisturbControl: View {
+    var body: some View {
+        ControlBackground {
+            HStack {
+                Button(action: {}) {
+                        Image(systemName: "moon.fill")
+                            .foregroundColor(Color(.label))
+                            .frame(width: 28, height: 28)
+                            .background(Color(.systemFill))
+                            .cornerRadius(14)
+                }
+                Text("Do Not Disturb")
+                    .font(.system(size: 12))
+                    .fontWeight(.bold)
+            }
+            .padding(.vertical, 12)
+            .frame(maxWidth: .infinity)
+        }
+    }
+}
+
+struct DoNotDisturbControl_Previews: PreviewProvider {
+    static var previews: some View {
+        LightAndDarkPreviews {
+            DoNotDisturbControl()
+        }
+    }
+}

Sources/Controls/KeyboardBrightnessControl.swift

@@ -0,0 +1,35 @@
+//
+//  KeyboardBrightnessControl.swift
+//  ControlCenter_iOS
+//
+//  Created by Sami Samhuri on 2020-06-25.
+//
+
+import SwiftUI
+
+struct KeyboardBrightnessControl: View {
+    let width: CGFloat
+    let height: CGFloat
+
+    var body: some View {
+        ControlBackground {
+            VStack {
+                Image(systemName: "light.max")
+                    .foregroundColor(Color(.label).opacity(0.8))
+                Text("Keyboard Brightness")
+                    .font(.system(size: 10))
+                    .fontWeight(.medium)
+                    .multilineTextAlignment(.center)
+            }
+            .frame(width: width, height: height)
+        }
+    }
+}
+
+struct KeyboardBrightnessControl_Previews: PreviewProvider {
+    static var previews: some View {
+        LightAndDarkPreviews {
+            KeyboardBrightnessControl(width: 72, height: 72)
+        }
+    }
+}

Sources/Controls/NowPlayingControl.swift

@@ -0,0 +1,42 @@
+//
+//  NowPlayingControl.swift
+//  ControlCenter_iOS
+//
+//  Created by Sami Samhuri on 2020-06-25.
+//
+
+import SwiftUI
+
+struct NowPlayingControl: View {
+    var body: some View {
+        ControlBackground {
+            HStack {
+                Rectangle()
+                    .fill(Color(.systemGray2))
+                    .frame(width: 50, height: 50)
+                    .cornerRadius(3)
+                    .opacity(0.5)
+
+                Spacer()
+
+                Button(action: {}) {
+                    Image(systemName: "play.fill")
+                        .foregroundColor(Color(.secondaryLabel))
+                }
+                Button(action: {}) {
+                    Image(systemName: "forward.fill")
+                        .foregroundColor(Color(.secondaryLabel))
+                }
+            }
+            .padding()
+        }
+    }
+}
+
+struct NowPlayingControl_Previews: PreviewProvider {
+    static var previews: some View {
+        LightAndDarkPreviews {
+            NowPlayingControl()
+        }
+    }
+}

Sources/Controls/SoundControl.swift

@@ -0,0 +1,39 @@
+//
+//  SoundControl.swift
+//  ControlCenter_iOS
+//
+//  Created by Sami Samhuri on 2020-06-25.
+//
+
+import SwiftUI
+
+struct SoundControl: View {
+    var body: some View {
+        ControlBackground {
+            VStack(alignment: .leading, spacing: 4) {
+                Text("Sound")
+                    .font(.system(size: 12))
+                    .fontWeight(.bold)
+                HStack {
+                    Slider(value: .constant(0.04))
+                    Button(action: {}) {
+                            Image(systemName: "airplayaudio")
+                                .foregroundColor(Color(.label))
+                                .background(Color(.systemFill))
+                                .frame(width: 28, height: 28)
+                                .cornerRadius(14)
+                    }
+                }
+            }
+            .padding(8)
+        }
+    }
+}
+
+struct SoundControl_Previews: PreviewProvider {
+    static var previews: some View {
+        LightAndDarkPreviews {
+            SoundControl()
+        }
+    }
+}

Sources/Controls/WirelessControls.swift

@@ -0,0 +1,27 @@
+//
+//  WirelessControls.swift
+//  ControlCenter_iOS
+//
+//  Created by Sami Samhuri on 2020-06-25.
+//
+
+import SwiftUI
+
+struct WirelessControls: View {
+    var body: some View {
+        ControlBackground {
+            VStack(alignment: .leading) {
+                WirelessView(iconName: "wifi", title: "Wi-Fi", subtitle: "Esher")
+                WirelessView(iconName: "wave.3.right", title: "Bluetooth", subtitle: "On")
+                WirelessView(iconName: "antenna.radiowaves.left.and.right", title: "AirDrop", subtitle: "Contacts Only")
+            }
+            .padding()
+        }
+    }
+}
+
+struct WirelessControls_Previews: PreviewProvider {
+    static var previews: some View {
+        WirelessControls()
+    }
+}

Sources/Controls/WirelessView.swift

@@ -0,0 +1,47 @@
+//
+//  WirelessView.swift
+//  ControlCenter_iOS
+//
+//  Created by Sami Samhuri on 2020-06-25.
+//
+
+import SwiftUI
+
+struct WirelessView: View {
+    let iconName: String
+    let title: String
+    let subtitle: String
+
+    var body: some View {
+        HStack {
+            Button(action: {}) {
+                    Image(systemName: iconName)
+                        .foregroundColor(.white)
+                        .frame(width: 28, height: 28)
+                        .background(Color.blue)
+                        .cornerRadius(14)
+            }
+            VStack(alignment: .leading) {
+                Text(title)
+                    .font(.system(size: 12))
+                    .fontWeight(.bold)
+
+                Text(subtitle)
+                    .font(.system(size: 10))
+                    .fontWeight(.medium)
+                    .foregroundColor(Color(.label).opacity(0.7))
+            }
+        }
+    }
+}
+
+struct WirelessView_Previews: PreviewProvider {
+    static var previews: some View {
+        LightAndDarkPreviews {
+            ControlBackground {
+                WirelessView(iconName: "wifi", title: "Wi-Fi", subtitle: "Escher")
+                    .padding()
+            }
+        }
+    }
+}

Sources/FancyBackground.swift

@@ -0,0 +1,37 @@
+//
+//  FancyBackground.swift
+//  ControlCenter_iOS
+//
+//  Created by Sami Samhuri on 2020-06-25.
+//
+
+import SwiftUI
+
+struct FancyBackground<Content: View>: View {
+    let content: Content
+
+    init(@ViewBuilder build: () -> Content) {
+        self.content = build()
+    }
+
+    var body: some View {
+        ZStack {
+            content.hidden().overlay(
+                LinearGradient(
+                    gradient: Gradient(colors: [.red, .purple, .blue]),
+                    startPoint: .topLeading,
+                    endPoint: .bottomTrailing
+                )
+            )
+            content
+        }
+    }
+}
+
+struct FancyBackground_Previews: PreviewProvider {
+    static var previews: some View {
+        FancyBackground {
+            Text("Hello")
+        }
+    }
+}

Sources/LightAndDarkPreviews.swift

@@ -0,0 +1,41 @@
+//
+//  LightAndDarkPreviews.swift
+//  ControlCenter_iOS
+//
+//  Created by Sami Samhuri on 2020-06-25.
+//
+
+import SwiftUI
+
+struct LightAndDarkPreviews<Content: View>: View {
+    let content: Content
+
+    init(@ViewBuilder build: () -> Content) {
+        self.content = build()
+    }
+
+    var body: some View {
+        Group {
+            FancyBackground {
+                content
+                    .padding()
+            }
+
+            FancyBackground {
+                content
+                    .padding()
+            }
+            .preferredColorScheme(.dark)
+        }
+    }
+}
+
+struct LightAndDarkPreviews_Previews: PreviewProvider {
+    static var previews: some View {
+        LightAndDarkPreviews {
+            ControlBackground {
+                Text("Hello").padding()
+            }
+        }
+    }
+}