Files.swift

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())