Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import SwiftUI
import PlaygroundSupport
struct searchBar: View {
@State var input = ""
var body: some View {
VStack {
HStack {
Image(systemName: "magnifyingglass")
TextField("Search", text: $input)
Spacer()
Image(systemName: "mic.fill")
}
.foregroundColor(Color(UIColor.secondaryLabel))
.padding(12)
.background(Color(UIColor.secondarySystemBackground))
.cornerRadius(14)
}
}
}
struct categorySection: View {
@State var label: String
@State var isExpanded = true
@State var tagRow: Bool = false
var body: some View {
VStack (spacing: 14) {
HStack {
HStack {
Text(label)
.foregroundColor(Color(UIColor.label))
.font(.title)
.fontWeight(.semibold)
.onTapGesture {
self.isExpanded.toggle()
}
Spacer()
VStack {
Image(systemName: "chevron.down")
.font(.headline)
}
.rotationEffect(self.isExpanded ? Angle(degrees: -180): Angle(degrees: 0))
.animation(.easeInOut(duration: 0.25))
.onTapGesture {
self.isExpanded.toggle()
}
}
}
HStack {
if isExpanded == true {
VStack (spacing: 0) {
listItemRow(
tagRow: $tagRow,
label: "Item One",
tagColor: Color.blue
)
listItemRow(
tagRow: $tagRow,
label: "Item Two",
tagColor: Color.red
)
listItemRow(
tagRow: $tagRow,
label: "Item Three",
tagColor: Color.yellow
)
listItemRow(
tagRow: $tagRow,
label: "Item Four",
tagColor: Color.orange
)
}
}
}
.animation(.easeInOut(duration: 0.25))
.frame(maxWidth: .infinity)
}
}
}
struct listItemRow: View {
@Binding var tagRow: Bool
@State var label: String
@State var tagColor: Color
var body: some View {
VStack (alignment: .leading, spacing: 0) {
HStack (alignment: .center, spacing: 12) {
if tagRow {
Circle()
.fill(tagColor)
.frame(width: 14, height: 14)
} else {
Image(systemName: "folder")
}
Text(label)
}
.padding()
Divider()
}
}
}
struct ContentView: View {
var body: some View {
ZStack {
Color(UIColor.secondarySystemBackground)
VStack (spacing: 32) {
VStack {
HStack {
Spacer()
Image(systemName: "ellipsis.circle")
.foregroundColor(Color.blue)
.font(.system(size: 24))
}
VStack (alignment: .leading, spacing: 12) {
Text ("Browse")
.font(.largeTitle)
.fontWeight(.semibold)
searchBar()
}
}
ScrollView(showsIndicators: false) {
VStack (alignment: .leading, spacing: 24) {
categorySection(
label: "Recents",
isExpanded: false,
tagRow: false
)
categorySection(
label: "Favorites",
isExpanded: true,
tagRow: false
)
categorySection(
label: "Tags",
isExpanded: true,
tagRow: true
)
}
}
}
.padding()
.frame(width: 375, height: 812)
.background(Color(UIColor.systemBackground))
}
}
}
PlaygroundPage.current.setLiveView(ContentView())
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.