Last active
February 14, 2024 03:41
-
-
Save jordansinger/72a05653dde9d182b4a5e24f9d19a106 to your computer and use it in GitHub Desktop.
macOS SwiftUI Playgrounds code
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import SwiftUI | |
| import PlaygroundSupport | |
| struct Desktop: View { | |
| var body: some View { | |
| ZStack { | |
| // Image(uiImage: #imageLiteral(resourceName: "IMG_6281.JPG")) | |
| Color(UIColor.systemBlue) | |
| macOS() | |
| } | |
| } | |
| } | |
| struct macOS: View { | |
| var body: some View { | |
| ZStack { | |
| ZStack { | |
| Window(title: "System Preferences") { | |
| SystemPreferences() | |
| } | |
| .draggable() | |
| Window(title: "Finder") { | |
| Finder() | |
| } | |
| .draggable() | |
| } | |
| VStack { | |
| Menu() | |
| Spacer() | |
| Dock() | |
| } | |
| } | |
| } | |
| } | |
| struct Window<Content: View>: View { | |
| @State var title: String | |
| let viewBuilder: () -> Content | |
| var body: some View { | |
| VStack { | |
| Toolbar(title: title) | |
| viewBuilder() | |
| Spacer() | |
| } | |
| .frame(width: 420, height: 320) | |
| .background(Color(UIColor.systemBackground)) | |
| .cornerRadius(12) | |
| .overlay( | |
| RoundedRectangle(cornerRadius: 12) | |
| .stroke(Color(UIColor.systemFill), lineWidth: 0.5) | |
| ) | |
| .shadow(color: Color(UIColor.black.withAlphaComponent(0.5)), radius: 16, x: 0, y: 8) | |
| } | |
| } | |
| struct Menu: View { | |
| var body: some View { | |
| HStack(spacing: 16) { | |
| Text("") | |
| Text("Finder").fontWeight(.semibold) | |
| Text("File") | |
| Text("Edit") | |
| Text("View") | |
| Text("Window") | |
| Text("Go") | |
| Text("Help") | |
| Spacer() | |
| Text("9:41") | |
| } | |
| .padding(.horizontal) | |
| .frame(height: 32) | |
| .background(Color(UIColor.systemBackground.withAlphaComponent(0.8))) | |
| } | |
| } | |
| struct Dock: View { | |
| var body: some View { | |
| HStack { | |
| DockIcon(icon: "safari.fill", backgroundColor: UIColor.systemBlue) | |
| DockIcon(icon: "message.fill", backgroundColor: UIColor.systemGreen) | |
| DockIcon(icon: "music.note", backgroundColor: UIColor.systemPink) | |
| DockIcon(icon: "gear", backgroundColor: UIColor.systemGray) | |
| Divider().frame(height: 40) | |
| DockIcon(icon: "folder.fill", backgroundColor: UIColor.systemGray2) | |
| } | |
| .padding() | |
| .background(Color(UIColor.systemBackground.withAlphaComponent(0.8))) | |
| .cornerRadius(24) | |
| .padding() | |
| .shadow(color: Color(UIColor.black.withAlphaComponent(0.2)), radius: 8, x: 0, y: 4) | |
| } | |
| } | |
| struct DockIcon: View { | |
| @State var icon: String | |
| @State var backgroundColor: UIColor | |
| var body: some View { | |
| Image(systemName: "app.fill") | |
| .font(.system(size: 56)) | |
| .foregroundColor(Color(backgroundColor)) | |
| .overlay( | |
| Image(systemName: icon) | |
| .font(.system(size: 28, weight: .semibold)) | |
| .foregroundColor(Color(UIColor.white)) | |
| ) | |
| } | |
| } | |
| struct Finder: View { | |
| var body: some View { | |
| ScrollView { | |
| VStack(spacing: 32) { | |
| HStack { | |
| Spacer() | |
| FinderFolder(label: "Applications", icon: "folder.fill") | |
| Spacer() | |
| FinderFolder(label: "Desktop", icon: "macwindow") | |
| Spacer() | |
| FinderFolder(label: "Documents", icon: "folder.fill") | |
| Spacer() | |
| } | |
| HStack { | |
| Spacer() | |
| FinderFolder(label: "Downloads", icon: "arrow.down.circle.fill") | |
| Spacer() | |
| FinderFolder(label: "Library", icon: "folder.fill") | |
| Spacer() | |
| FinderFolder(label: "Music", icon: "music.note") | |
| Spacer() | |
| } | |
| HStack { | |
| Spacer() | |
| FinderFolder(label: "Movies", icon: "video.fill") | |
| Spacer() | |
| FinderFolder(label: "Pictures", icon: "photo.fill") | |
| Spacer() | |
| FinderFolder(label: "Public", icon: "folder.fill") | |
| Spacer() | |
| } | |
| } | |
| .padding() | |
| } | |
| } | |
| } | |
| struct FinderFolder: View { | |
| @State var label: String | |
| @State var icon: String | |
| var body: some View { | |
| VStack(spacing: 16) { | |
| Image(systemName: icon) | |
| .font(.system(size: 40)) | |
| .foregroundColor(Color(UIColor.systemBlue.withAlphaComponent(0.5))) | |
| Text(label) | |
| .font(.callout) | |
| .foregroundColor(Color(UIColor.label)) | |
| } | |
| .frame(width: 92) | |
| } | |
| } | |
| struct Toolbar: View { | |
| @State var title: String | |
| var body: some View { | |
| VStack(spacing: 0) { | |
| HStack(spacing: 24) { | |
| Stoplights() | |
| HStack(spacing: 16) { | |
| Image(systemName: "chevron.left") | |
| .font(.system(size: 18, weight: .semibold)) | |
| .foregroundColor(Color(UIColor.secondaryLabel)) | |
| Image(systemName: "chevron.right") | |
| .font(.system(size: 18, weight: .semibold)) | |
| .foregroundColor(Color(UIColor.tertiaryLabel)) | |
| } | |
| Text(title) | |
| .font(.headline) | |
| Spacer() | |
| Image(systemName: "magnifyingglass") | |
| .font(.system(size: 18, weight: .medium)) | |
| .foregroundColor(Color(UIColor.secondaryLabel)) | |
| } | |
| .padding() | |
| Divider() | |
| } | |
| } | |
| } | |
| struct Stoplights: View { | |
| var body: some View { | |
| HStack(spacing: 8) { | |
| Circle() | |
| .frame(width: 12, height: 12) | |
| .foregroundColor(Color(UIColor.systemRed)) | |
| Circle() | |
| .frame(width: 12, height: 12) | |
| .foregroundColor(Color(UIColor.systemYellow)) | |
| Circle() | |
| .frame(width: 12, height: 12) | |
| .foregroundColor(Color(UIColor.systemGreen)) | |
| } | |
| } | |
| } | |
| struct SystemPreferences: View { | |
| var body: some View { | |
| VStack(spacing: 4) { | |
| HStack { | |
| User(name: "Jordan Singer") | |
| Spacer() | |
| } | |
| .padding(.horizontal, 32) | |
| .padding(.vertical, 16) | |
| Divider().background(Color(UIColor.systemFill)) | |
| VStack(spacing: 24) { | |
| HStack { | |
| Spacer() | |
| Group { | |
| Setting(title: "Update", icon: "gear") | |
| Spacer() | |
| Setting(title: "Network", icon: "network", color: UIColor.systemBlue) | |
| Spacer() | |
| Setting(title: "Sound", icon: "speaker.wave.2.fill") | |
| Spacer() | |
| Setting(title: "Battery", icon: "battery.100", color: UIColor.systemGreen) | |
| } | |
| Spacer() | |
| } | |
| HStack { | |
| Spacer() | |
| Group { | |
| Setting(title: "Keyboard", icon: "keyboard") | |
| Spacer() | |
| Setting(title: "Printer", icon: "printer.fill") | |
| Spacer() | |
| Setting(title: "Displays", icon: "display", color: UIColor.systemBlue) | |
| Spacer() | |
| Setting(title: "Date", icon: "calendar.badge.clock", color: UIColor.systemRed) | |
| } | |
| Spacer() | |
| } | |
| } | |
| .padding(.vertical, 24) | |
| Spacer() | |
| } | |
| .frame(maxWidth: .infinity, maxHeight: .infinity) | |
| } | |
| } | |
| struct User: View { | |
| @State var name: String | |
| var body: some View { | |
| HStack(spacing: 12) { | |
| Image(systemName: "person.crop.circle.fill") | |
| .font(.system(size: 48)) | |
| .foregroundColor(Color(UIColor.systemGray)) | |
| VStack(alignment: .leading, spacing: 2) { | |
| Text(name).font(.headline) | |
| Text("Apple ID, iCloud, Media & App Store").font(.subheadline) | |
| } | |
| } | |
| } | |
| } | |
| struct Setting: View { | |
| @State var title: String | |
| @State var icon: String | |
| @State var color: UIColor = UIColor.systemGray | |
| var body: some View { | |
| VStack(spacing: 8) { | |
| Image(systemName: icon) | |
| .font(.system(size: 28)) | |
| .foregroundColor(Color(color)) | |
| Text(title) | |
| .font(.system(.callout)) | |
| .foregroundColor(Color(UIColor.systemGray)) | |
| .multilineTextAlignment(.center) | |
| .fixedSize(horizontal: false, vertical: true) | |
| .lineLimit(2) | |
| } | |
| .frame(width: 72) | |
| } | |
| } | |
| struct DraggableView: ViewModifier { | |
| @State var offset = CGPoint(x: 0, y: 0) | |
| func body(content: Content) -> some View { | |
| content | |
| .gesture(DragGesture(minimumDistance: 0) | |
| .onChanged { value in | |
| self.offset.x += value.location.x - value.startLocation.x | |
| self.offset.y += value.location.y - value.startLocation.y | |
| }) | |
| .offset(x: offset.x, y: offset.y) | |
| } | |
| } | |
| extension View { | |
| func draggable() -> some View { | |
| return modifier(DraggableView()) | |
| } | |
| } | |
| PlaygroundPage.current.setLiveView(Desktop()) |
A simpler Finder
struct Finder: View { var columns: [GridItem] = Array(repeating: .init(.flexible()), count: 3) var body: some View { ScrollView { LazyVGrid(columns: columns, alignment: .center) { FinderFolder(label: "Applications", icon: "folder.fill") FinderFolder(label: "Desktop", icon: "macwindow") FinderFolder(label: "Documents", icon: "folder.fill") FinderFolder(label: "Downloads", icon: "arrow.down.circle.fill") FinderFolder(label: "Library", icon: "folder.fill") FinderFolder(label: "Music", icon: "music.note") FinderFolder(label: "Movies", icon: "video.fill") FinderFolder(label: "Pictures", icon: "photo.fill") FinderFolder(label: "Public", icon: "folder.fill") } .padding() } } }
very nice!
Amazing showcase of SwiftUI!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
A simpler Finder