-
-
Save wb-towa/09fc23d2a7b4b73940569bfcd1c21087 to your computer and use it in GitHub Desktop.
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 app: View { | |
var appTitle: String | |
var appDesc: String | |
var appColor: Color | |
var body: some View { | |
HStack (alignment: .center, spacing: 14) { | |
VStack { | |
Rectangle() | |
.foregroundColor(appColor) | |
.frame(width: 68, height: 68) | |
.cornerRadius(14) | |
} | |
VStack (alignment: .leading, spacing: 8) { | |
Text(appTitle) | |
.font(.body) | |
Text(appDesc) | |
.font(.subheadline) | |
.foregroundColor(Color(UIColor.gray)) | |
} | |
Spacer() | |
VStack { | |
Text("GET") | |
.foregroundColor(Color.blue) | |
.fontWeight(.semibold) | |
.padding(.top, 6) | |
.padding(.bottom, 6) | |
.padding(.leading, 20) | |
.padding(.trailing, 20) | |
} | |
.background(Color(UIColor.secondarySystemFill)) | |
.cornerRadius(24) | |
} | |
} | |
} | |
struct largeFeature: View { | |
var blueCategory: String | |
var title: String | |
var subTitle: String | |
var featureColor: Color | |
var body: some View { | |
VStack (alignment: .leading) { | |
VStack (alignment: .leading, spacing: 4) { | |
Text(blueCategory.uppercased()) | |
.foregroundColor(Color.blue) | |
.font(.caption) | |
Text(title) | |
.font(.title) | |
.foregroundColor(Color(UIColor.label)) | |
Text(subTitle) | |
.font(.body) | |
.foregroundColor(Color(UIColor.secondaryLabel)) | |
} | |
Rectangle() | |
.foregroundColor(featureColor) | |
.frame(width: 300, height: 200) | |
.cornerRadius(8) | |
} | |
} | |
} | |
struct Screen: View { | |
var body: some View { | |
VStack (spacing: 32) { | |
ScrollView(showsIndicators: false) { | |
HStack { | |
Text("Apps") | |
.font(.largeTitle) | |
.fontWeight(.bold) | |
Spacer() | |
Image(systemName: "person.crop.circle.fill") | |
.font(.largeTitle) | |
} | |
Divider() | |
VStack (spacing: 14) { | |
ScrollView(.horizontal, showsIndicators: false) { | |
HStack (spacing: 14) { | |
largeFeature( | |
blueCategory: "Category", | |
title: "App Title", | |
subTitle: "App description here...", | |
featureColor: Color.pink | |
) | |
largeFeature( | |
blueCategory: "Category", | |
title: "App Title", | |
subTitle: "App description here...", | |
featureColor: Color.yellow | |
) | |
} | |
} | |
Divider() | |
HStack { | |
VStack (spacing: 14) { | |
HStack { | |
Text("New to iPhone?") | |
.font(.title) | |
.fontWeight(.semibold) | |
Spacer() | |
Text("See All") | |
.foregroundColor(.blue) | |
} | |
ScrollView(.horizontal, showsIndicators: false) { | |
HStack (spacing: 20) { | |
VStack { | |
app( | |
appTitle: "App Name", | |
appDesc: "App description...", | |
appColor: Color.blue | |
) | |
Divider() | |
app( | |
appTitle: "App Name", | |
appDesc: "App description...", | |
appColor: Color.yellow | |
) | |
Divider() | |
app( | |
appTitle: "App Name", | |
appDesc: "App description...", | |
appColor: Color.pink | |
) | |
} | |
VStack { | |
app( | |
appTitle: "App Name", | |
appDesc: "App description...", | |
appColor: Color.green | |
) | |
Divider() | |
app( | |
appTitle: "App Name", | |
appDesc: "App description...", | |
appColor: Color.purple | |
) | |
Divider() | |
app( | |
appTitle: "App Name", | |
appDesc: "App description...", | |
appColor: Color.orange | |
) | |
} | |
} | |
} | |
} | |
} | |
Spacer() | |
HStack { | |
VStack (spacing: 14) { | |
HStack { | |
Text("Popular Apps") | |
.font(.title) | |
.fontWeight(.semibold) | |
Spacer() | |
Text("See All") | |
.foregroundColor(.blue) | |
} | |
ScrollView(.horizontal, showsIndicators: false) { | |
HStack (spacing: 20) { | |
VStack { | |
app( | |
appTitle: "App Name", | |
appDesc: "App description...", | |
appColor: Color.green | |
) | |
Divider() | |
app( | |
appTitle: "App Name", | |
appDesc: "App description...", | |
appColor: Color.pink | |
) | |
Divider() | |
app( | |
appTitle: "App Name", | |
appDesc: "App description...", | |
appColor: Color.yellow | |
) | |
} | |
VStack { | |
app( | |
appTitle: "App Name", | |
appDesc: "App description...", | |
appColor: Color.orange | |
) | |
Divider() | |
app( | |
appTitle: "App Name", | |
appDesc: "App description...", | |
appColor: Color.blue | |
) | |
Divider() | |
app( | |
appTitle: "App Name", | |
appDesc: "App description...", | |
appColor: Color.pink | |
) | |
} | |
} | |
} | |
} | |
} | |
} | |
} | |
} | |
.padding() | |
.frame(width: 375, height: 812) | |
.background(Color(UIColor.systemBackground)) | |
} | |
} | |
PlaygroundPage.current.setLiveView(Screen()) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment