Skip to content

Instantly share code, notes, and snippets.

@joeyabanks
Last active November 11, 2020 14:14
Show Gist options
  • Save joeyabanks/be934c5899af9cf6859d706d743b1aa5 to your computer and use it in GitHub Desktop.
Save joeyabanks/be934c5899af9cf6859d706d743b1aa5 to your computer and use it in GitHub Desktop.
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