Implemented the TaskGroupListCard view in the app target.

2026-02-09 22:27:07 +01:00
parent fae7a476a1
commit 5f6ae0d55b
2 changed files with 115 additions and 2 deletions
@@ -0,0 +1,113 @@
+import SwiftUI
+
+extension TaskGroupListView {
+    
+    /// A card-style view representing a single todo task group with its count.
+    ///
+    /// This view displays a task group as a compact card showing:
+    /// - The group's icon and title on the left
+    /// - The task count on the right
+    /// - A tinted background using the group's color
+    ///
+    /// The view is designed to be used within the `TaskGroupListView` and is typically
+    /// wrapped in a `NavigationLink` to allow navigation to detailed task lists.
+    struct Card: View {
+
+        // MARK: Properties
+
+        /// The number of tasks.
+        private let count: Int
+        
+        /// The task group.
+        private let group: TodoGroup
+
+        // MARK: Initializers
+
+        /// Creates a task group list card.
+        /// - Parameters:
+        ///   - group: The task group to display.
+        ///   - count: The number of tasks in the group.
+        init(
+            group: TodoGroup,
+            count: Int
+        ) {
+            self.count = count
+            self.group = group
+        }
+
+        // MARK: Body
+
+        /// The content and behavior of the view.
+        ///
+        /// Displays a horizontal card layout with the group icon and title on the left,
+        /// and the task count on the right, all within a colored background.
+        var body: some View {
+            HStack {
+                VStack(
+                    alignment: .leading,
+                    spacing: 8
+                ) {
+                    Image(systemName: group.iconName)
+                        .font(.system(size: 40))
+                        .foregroundStyle(group.color)
+                    
+                    Text(group.title)
+                        .font(.headline)
+                        .foregroundStyle(.primary)
+                        .frame(
+                            maxWidth: .infinity,
+                            alignment: .leading
+                        )
+                }
+                .padding(.vertical, 24)
+                
+                Spacer()
+
+                Text("\(count)")
+                    .font(.title)
+                    .fontWeight(.bold)
+                    .foregroundStyle(group.color)
+            }
+            .padding(.horizontal, 24)
+            .background(
+                RoundedRectangle(cornerRadius: 8)
+                    .fill(group.color.opacity(0.1))
+            )
+        }
+    }
+
+}
+
+// MARK: - Previews
+
+#Preview("Today item") {
+    TaskGroupListView.Card(
+        group: .today,
+        count: .random(in: 0...20)
+    )
+    .padding(.horizontal, 16)
+}
+
+#Preview("Upcoming item") {
+    TaskGroupListView.Card(
+        group: .upcoming,
+        count: .random(in: 0...20)
+    )
+    .padding(.horizontal, 16)
+}
+
+#Preview("Overdue item") {
+    TaskGroupListView.Card(
+        group: .overdue,
+        count: .random(in: 0...20)
+    )
+    .padding(.horizontal, 16)
+}
+
+#Preview("Completed item") {
+    TaskGroupListView.Card(
+        group: .completed,
+        count: .random(in: 0...20)
+    )
+    .padding(.horizontal, 16)
+}