From 1cf4341d3357eeff56ec550b6929d3e473224d87 Mon Sep 17 00:00:00 2001 From: anthonyle51 Date: Tue, 25 Feb 2025 18:00:20 -0500 Subject: [PATCH 1/6] searchview --- Gauge/Profiles+Search/Views/SearchView.swift | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 Gauge/Profiles+Search/Views/SearchView.swift diff --git a/Gauge/Profiles+Search/Views/SearchView.swift b/Gauge/Profiles+Search/Views/SearchView.swift new file mode 100644 index 0000000..fb52a8d --- /dev/null +++ b/Gauge/Profiles+Search/Views/SearchView.swift @@ -0,0 +1,18 @@ +// +// SearchView.swift +// Gauge +// +// Created by Anthony Le on 2/25/25. +// + +import SwiftUI + +struct SearchView: View { + var body: some View { + Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/) + } +} + +#Preview { + SearchView() +} From 17d4b4f12f82a791883ab1c218800c307892060b Mon Sep 17 00:00:00 2001 From: anthonyle51 Date: Thu, 27 Feb 2025 16:40:53 -0500 Subject: [PATCH 2/6] search bar --- Gauge/Profiles+Search/Views/SearchView.swift | 34 +++++++++++++++++++- 1 file changed, 33 insertions(+), 1 deletion(-) diff --git a/Gauge/Profiles+Search/Views/SearchView.swift b/Gauge/Profiles+Search/Views/SearchView.swift index fb52a8d..8d41e9d 100644 --- a/Gauge/Profiles+Search/Views/SearchView.swift +++ b/Gauge/Profiles+Search/Views/SearchView.swift @@ -8,8 +8,40 @@ import SwiftUI struct SearchView: View { + @State private var searchText: String = "" var body: some View { - Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/) + NavigationView { + VStack { + // Search Bar + HStack { + HStack { + Image(systemName: "magnifyingglass") + .foregroundColor(.gray) + + TextField("Search", text: $searchText) + .foregroundColor(.gray) + } + .padding(.horizontal) + .padding(.vertical, 8) + .background(Color(.systemGray6)) + .cornerRadius(12) + } + .padding(.horizontal) + .padding(.bottom) + .background(Color(red: 0.4627, green: 0.8392, blue: 1.0)) + Spacer() + + + + + + + + + + } + .navigationTitle("Explore") + } } } From 0271190d62a36561ae480a77d3076b7a63f624de Mon Sep 17 00:00:00 2001 From: anthonyle51 Date: Mon, 3 Mar 2025 22:47:31 -0500 Subject: [PATCH 3/6] categories --- Gauge/Profiles+Search/Views/SearchView.swift | 48 ++++++++++++++++++-- 1 file changed, 45 insertions(+), 3 deletions(-) diff --git a/Gauge/Profiles+Search/Views/SearchView.swift b/Gauge/Profiles+Search/Views/SearchView.swift index 8d41e9d..b6e9c79 100644 --- a/Gauge/Profiles+Search/Views/SearchView.swift +++ b/Gauge/Profiles+Search/Views/SearchView.swift @@ -9,6 +9,13 @@ import SwiftUI struct SearchView: View { @State private var searchText: String = "" + let items = Array(1...50).map { "Category \($0)" } + + // Define the grid columns + let columns = [ + GridItem(.flexible()), + GridItem(.flexible()) + ] var body: some View { NavigationView { VStack { @@ -27,12 +34,47 @@ struct SearchView: View { .cornerRadius(12) } .padding(.horizontal) - .padding(.bottom) + .padding(.bottom, 20) .background(Color(red: 0.4627, green: 0.8392, blue: 1.0)) - Spacer() - + // Categories + Text("Categories") + .font(.headline) + .bold() + .frame(maxWidth: .infinity, alignment: .leading) + .padding(.horizontal) + ScrollView { + LazyVGrid(columns: columns, spacing: 10) { + ForEach(items.indices, id: \.self) { index in + if index < 2 { + Section { + + } header: { + ZStack { + RoundedRectangle(cornerRadius: 10) + .fill(Color.red) + .frame(height: 100) + Text(items[index]) + .foregroundColor(.white) + .font(.headline) + } + } + } else { + ZStack { + RoundedRectangle(cornerRadius: 10) + .fill(Color.blue) + .frame(height: 100) + + Text(items[index]) + .foregroundColor(.white) + .font(.headline) + } + } + } + } + } + .padding(.horizontal) From e1f46815b0d29aac736b792f2ffe3517b0580f1a Mon Sep 17 00:00:00 2001 From: anthonyle51 Date: Tue, 4 Mar 2025 14:52:10 -0500 Subject: [PATCH 4/6] search --- Gauge/Profiles+Search/Views/SearchView.swift | 130 +++++++++++++------ 1 file changed, 89 insertions(+), 41 deletions(-) diff --git a/Gauge/Profiles+Search/Views/SearchView.swift b/Gauge/Profiles+Search/Views/SearchView.swift index b6e9c79..e86f169 100644 --- a/Gauge/Profiles+Search/Views/SearchView.swift +++ b/Gauge/Profiles+Search/Views/SearchView.swift @@ -9,6 +9,7 @@ import SwiftUI struct SearchView: View { @State private var searchText: String = "" + @FocusState private var isSearchFieldFocused: Bool let items = Array(1...50).map { "Category \($0)" } // Define the grid columns @@ -16,73 +17,120 @@ struct SearchView: View { GridItem(.flexible()), GridItem(.flexible()) ] + var body: some View { - NavigationView { + NavigationStack { VStack { // Search Bar HStack { HStack { Image(systemName: "magnifyingglass") - .foregroundColor(.gray) + .foregroundColor(Color(.systemGray)) TextField("Search", text: $searchText) - .foregroundColor(.gray) + .foregroundColor(Color(.black)) + .focused($isSearchFieldFocused) + .onTapGesture { + isSearchFieldFocused = true + } + .onAppear { + DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) { + isSearchFieldFocused = true + } + } } .padding(.horizontal) - .padding(.vertical, 8) - .background(Color(.systemGray6)) + .padding(.vertical, 5) + .background(Color(.systemGray5)) .cornerRadius(12) + + if isSearchFieldFocused { + Button("Cancel") { + isSearchFieldFocused = false + searchText = "" + } + .foregroundColor(.blue) + .padding(.leading, 1) + .transition(.move(edge: .trailing)) + .animation(.easeInOut, value: isSearchFieldFocused) + } } .padding(.horizontal) - .padding(.bottom, 20) - .background(Color(red: 0.4627, green: 0.8392, blue: 1.0)) + .padding(.top, 1) + .padding(.bottom, 10) - // Categories - Text("Categories") - .font(.headline) - .bold() - .frame(maxWidth: .infinity, alignment: .leading) - .padding(.horizontal) - - ScrollView { - LazyVGrid(columns: columns, spacing: 10) { - ForEach(items.indices, id: \.self) { index in - if index < 2 { - Section { - - } header: { + if isSearchFieldFocused { + RecentSearchesView(isSearchFieldFocused: $isSearchFieldFocused, searchText: $searchText) + } else { + // Categories + Text("Categories") + .font(.headline) + .bold() + .frame(maxWidth: .infinity, alignment: .leading) + .padding(.horizontal) + + ScrollView { + LazyVGrid(columns: columns, spacing: 10) { + ForEach(items.indices, id: \.self) { index in + if index < 2 { + // Large Categories + Section { + + } header: { + ZStack { + RoundedRectangle(cornerRadius: 10) + .fill(Color(.systemGray5)) + .frame(height: 100) + Text(items[index]) + .foregroundColor(Color(.black)) + .font(.headline) + } + } + } else { + // Small Categories ZStack { RoundedRectangle(cornerRadius: 10) - .fill(Color.red) + .fill(Color(.systemGray5)) .frame(height: 100) + Text(items[index]) - .foregroundColor(.white) + .foregroundColor(.black) .font(.headline) } } - } else { - ZStack { - RoundedRectangle(cornerRadius: 10) - .fill(Color.blue) - .frame(height: 100) - - Text(items[index]) - .foregroundColor(.white) - .font(.headline) - } } } } + .padding(.horizontal) + } + } + .navigationTitle(isSearchFieldFocused ? "" : "Explore") + } + } +} + +struct RecentSearchesView: View { + @FocusState.Binding var isSearchFieldFocused: Bool + @Binding var searchText: String + let recentSearches = ["Ha", "UIKit", "iOS 17", "Xcode", "Instagram Clone"] + + var body: some View { + VStack(alignment: .leading) { + Text("Recent Searches") + .font(.headline) + .padding(.leading) + + List(recentSearches, id: \.self) { search in + Button(action: { + searchText = search + isSearchFieldFocused = false + }) { + Text(search) + .foregroundColor(.black) + .padding(.vertical, 5) } - .padding(.horizontal) - - - - - - } - .navigationTitle("Explore") + .listStyle(PlainListStyle()) } } } From 8af91bb7b404cf17251c0c00ed78eb457c60307b Mon Sep 17 00:00:00 2001 From: anthonyle51 Date: Tue, 4 Mar 2025 15:11:09 -0500 Subject: [PATCH 5/6] categories view --- Gauge/Profiles+Search/Views/SearchView.swift | 103 ++++++++++--------- 1 file changed, 53 insertions(+), 50 deletions(-) diff --git a/Gauge/Profiles+Search/Views/SearchView.swift b/Gauge/Profiles+Search/Views/SearchView.swift index e86f169..1cbbbd3 100644 --- a/Gauge/Profiles+Search/Views/SearchView.swift +++ b/Gauge/Profiles+Search/Views/SearchView.swift @@ -10,13 +10,8 @@ import SwiftUI struct SearchView: View { @State private var searchText: String = "" @FocusState private var isSearchFieldFocused: Bool - let items = Array(1...50).map { "Category \($0)" } + @State var items = Array(1...50).map { "Category \($0)" } - // Define the grid columns - let columns = [ - GridItem(.flexible()), - GridItem(.flexible()) - ] var body: some View { NavigationStack { @@ -33,11 +28,6 @@ struct SearchView: View { .onTapGesture { isSearchFieldFocused = true } - .onAppear { - DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) { - isSearchFieldFocused = true - } - } } .padding(.horizontal) .padding(.vertical, 5) @@ -62,57 +52,70 @@ struct SearchView: View { if isSearchFieldFocused { RecentSearchesView(isSearchFieldFocused: $isSearchFieldFocused, searchText: $searchText) } else { - // Categories - Text("Categories") - .font(.headline) - .bold() - .frame(maxWidth: .infinity, alignment: .leading) - .padding(.horizontal) - - ScrollView { - LazyVGrid(columns: columns, spacing: 10) { - ForEach(items.indices, id: \.self) { index in - if index < 2 { - // Large Categories - Section { - - } header: { - ZStack { - RoundedRectangle(cornerRadius: 10) - .fill(Color(.systemGray5)) - .frame(height: 100) - Text(items[index]) - .foregroundColor(Color(.black)) - .font(.headline) - } - } - } else { - // Small Categories - ZStack { - RoundedRectangle(cornerRadius: 10) - .fill(Color(.systemGray5)) - .frame(height: 100) - - Text(items[index]) - .foregroundColor(.black) - .font(.headline) - } - } + CategoriesView(items: $items) + } + } + .navigationTitle(isSearchFieldFocused ? "" : "Explore") + } + } +} + +struct CategoriesView: View { + @Binding var items: [String] + let columns = [ + GridItem(.flexible()), + GridItem(.flexible()) + ] + var body: some View { + Text("Categories") + .font(.headline) + .bold() + .frame(maxWidth: .infinity, alignment: .leading) + .padding(.horizontal) + + ScrollView { + LazyVGrid(columns: columns, spacing: 10) { + ForEach(items.indices, id: \.self) { index in + if index < 2 { + // Large Categories + Section { + + } header: { + ZStack { + RoundedRectangle(cornerRadius: 10) + .fill(Color(.systemGray5)) + .frame(height: 100) + Text(items[index]) + .foregroundColor(Color(.black)) + .font(.headline) } } + } else { + // Small Categories + ZStack { + RoundedRectangle(cornerRadius: 10) + .fill(Color(.systemGray5)) + .frame(height: 100) + + Text(items[index]) + .foregroundColor(.black) + .font(.headline) + } } - .padding(.horizontal) } } - .navigationTitle(isSearchFieldFocused ? "" : "Explore") } + .padding(.horizontal) } } struct RecentSearchesView: View { @FocusState.Binding var isSearchFieldFocused: Bool @Binding var searchText: String - let recentSearches = ["Ha", "UIKit", "iOS 17", "Xcode", "Instagram Clone"] + + var showRecentSearches: Bool = true + let recentSearches = ["topic", "topic", "topic", "topic", "topic"] + let recentUsers = ["username", "username", "username", "username", "username"] var body: some View { VStack(alignment: .leading) { From 9c0deef18245b7fc82fdfe8a57fcdcf3f17f6088 Mon Sep 17 00:00:00 2001 From: anthonyle51 Date: Tue, 4 Mar 2025 15:55:01 -0500 Subject: [PATCH 6/6] recent searches and recent users --- Gauge/Profiles+Search/Views/SearchView.swift | 83 +++++++++++++++++--- 1 file changed, 70 insertions(+), 13 deletions(-) diff --git a/Gauge/Profiles+Search/Views/SearchView.swift b/Gauge/Profiles+Search/Views/SearchView.swift index 1cbbbd3..09033fe 100644 --- a/Gauge/Profiles+Search/Views/SearchView.swift +++ b/Gauge/Profiles+Search/Views/SearchView.swift @@ -113,28 +113,85 @@ struct RecentSearchesView: View { @FocusState.Binding var isSearchFieldFocused: Bool @Binding var searchText: String - var showRecentSearches: Bool = true - let recentSearches = ["topic", "topic", "topic", "topic", "topic"] - let recentUsers = ["username", "username", "username", "username", "username"] + @State private var recentSearches = ["topic", "topic", "topic", "topic", "topic"] + @State private var recentUsers = ["username", "username", "username", "username", "username"] + let tabs = ["Topics", "Users"] + @State private var selectedTab: String = "Topics" var body: some View { VStack(alignment: .leading) { - Text("Recent Searches") + Text("Recent") .font(.headline) .padding(.leading) - List(recentSearches, id: \.self) { search in - Button(action: { - searchText = search - isSearchFieldFocused = false - }) { - Text(search) - .foregroundColor(.black) - .padding(.vertical, 5) + ScrollView { + VStack(alignment: .leading, spacing: 10) { + if (selectedTab == "Topics") { + ForEach(Array(recentSearches.enumerated()), id: \.element) { index, search in + HStack{ + HStack { + Image(systemName: "number") + .font(.system(size: 12, weight: .bold)) + .foregroundColor(.black) + .padding(8) + .background(Color(.systemGray5)) + .clipShape(Circle()) + + Text(search) + .padding(5) + .frame(maxWidth: .infinity, alignment: .leading) + .background(Color.white) + .cornerRadius(10) + } + + Button(action: { + recentSearches.remove(at: index) + }) { + Image(systemName: "xmark") + .font(.system(size: 12, weight: .regular)) + .foregroundColor(Color(.systemGray)) + .padding() + } + } + } + } else { + ForEach(Array(recentUsers.enumerated()), id: \.element) { index, user in + HStack{ + HStack { + Circle() + .fill(Color(.systemGray)) + .frame(width: 30, height: 30) + Text(user) + .padding(5) + .frame(maxWidth: .infinity, alignment: .leading) + .background(Color.white) + .cornerRadius(10) + } + + Button(action: { + recentUsers.remove(at: index) + }) { + Image(systemName: "xmark") + .font(.system(size: 12, weight: .regular)) + .foregroundColor(Color(.systemGray)) + .padding() + } + } + } + } } + .padding() + } + } + + Picker(selection: $selectedTab, label: Text("")) { + ForEach(tabs, id: \.self) { tab in + Text(tab).tag(tab) } - .listStyle(PlainListStyle()) } + .pickerStyle(SegmentedPickerStyle()) + .frame(width: 300) + .padding() } }