feat: add placeholder for empty state

Memola/Components/Views/Placeholder/Placeholder.swift

@@ -0,0 +1,56 @@
+//
+//  Placeholder.swift
+//  Memola
+//
+//  Created by Dscyre Scotti on 6/27/24.
+//
+
+import SwiftUI
+
+struct Placeholder: View {
+    let info: Info
+
+    var body: some View {
+        VStack(spacing: 15) {
+            Image(systemName: info.icon)
+                .font(.system(size: 50))
+                .frame(width: 55, height: 55)
+            VStack(spacing: 3) {
+                Text(info.title)
+                    .font(.title2)
+                    .fontWeight(.bold)
+                    .foregroundStyle(.primary)
+                Text(info.description)
+                    .font(.callout)
+                    .fontWeight(.regular)
+                    .frame(minHeight: 50, alignment: .top)
+            }
+        }
+        .foregroundStyle(.secondary)
+        .multilineTextAlignment(.center)
+        .padding()
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
+    }
+}
+
+extension Placeholder {
+    struct Info {
+        let title: String
+        let description: String
+        let icon: String
+
+        static let memoNotFound: Info = {
+            let icon: String = "sparkle.magnifyingglass"
+            let title: String = "No Memos Found"
+            let description: String = "Explore your other memos or create your own."
+            return Placeholder.Info(title: title, description: description, icon: icon)
+        }()
+
+        static let memoEmpty: Info = {
+            let icon: String = "wand.and.stars"
+            let title: String = "No Memos"
+            let description: String = "Create a new memo to jot your thoughts or notes down."
+            return Placeholder.Info(title: title, description: description, icon: icon)
+        }()
+    }
+}

Memola/Features/Memos/MemosView.swift

@@ -37,7 +37,7 @@ struct MemosView: View {
     var body: some View {
         NavigationStack {
             memoGrid
-                .navigationTitle("Memos")
+                .navigationTitle("Memola")
                 .searchable(text: $query, placement: .toolbar, prompt: Text("Search"))
                 .toolbar {
                     ToolbarItemGroup(placement: .primaryAction) {
@@ -98,17 +98,22 @@ struct MemosView: View {
         }
     }
 
+    @ViewBuilder
     var memoGrid: some View {
-        GeometryReader { proxy in
-            let count = Int(proxy.size.width / cellWidth)
-            let columns: [GridItem] = .init(repeating: GridItem(.flexible(), spacing: 15), count: count)
-            ScrollView {
-                LazyVGrid(columns: columns, spacing: 15) {
-                    ForEach(memoObjects) { memo in
-                        memoCard(memo)
+        if memoObjects.isEmpty {
+            Placeholder(info: query.isEmpty ? .memoEmpty : .memoNotFound)
+        } else {
+            GeometryReader { proxy in
+                let count = Int(proxy.size.width / cellWidth)
+                let columns: [GridItem] = .init(repeating: GridItem(.flexible(), spacing: 15), count: count)
+                ScrollView {
+                    LazyVGrid(columns: columns, spacing: 15) {
+                        ForEach(memoObjects) { memo in
+                            memoCard(memo)
+                        }
                     }
+                    .padding()
                 }
-                .padding()
             }
         }
     }