From 0d43a148db30307eee35b7d8177e4be9b3487ae6 Mon Sep 17 00:00:00 2001
From: Javier Cicchelli <javier@rock-n-code.com>
Date: Sun, 6 Oct 2024 13:10:50 +0200
Subject: [PATCH] Implemented the ListItem component in the app target.

---
 Piper/Sources/UI/Components/ListItem.swift | 85 ++++++++++++++++++++++
 1 file changed, 85 insertions(+)
 create mode 100644 Piper/Sources/UI/Components/ListItem.swift

diff --git a/Piper/Sources/UI/Components/ListItem.swift b/Piper/Sources/UI/Components/ListItem.swift
new file mode 100644
index 0000000..0b97888
--- /dev/null
+++ b/Piper/Sources/UI/Components/ListItem.swift
@@ -0,0 +1,85 @@
+//
+//  ListItem.swift
+//  Piper ~ App
+//
+//  Created by Javier Cicchelli on 06/10/2024.
+//  Copyright © 2024 Röck+Cöde. All rights reserved.
+//
+
+import SwiftUI
+
+struct ListItem: View {
+    
+    // MARK: Properties
+    
+    let repository: Repository
+    
+    // MARK: Body
+    
+    var body: some View {
+        Label {
+            VStack(
+                alignment: .leading,
+                spacing: 4
+            ) {
+                Text(repository.name)
+                    .font(.title)
+                    .fontWeight(.semibold)
+                    .foregroundStyle(.primary)
+                
+                Text(repository.path.relativePath)
+                    .font(.subheadline)
+                    .foregroundStyle(.secondary)
+            }
+        } icon: {
+            Image(systemName: "folder")
+                .resizable()
+        }
+        .labelStyle(ItemLabelStyle())
+        .padding(.vertical, 8)
+    }
+    
+}
+
+// MARK: - Label Styles
+
+struct ItemLabelStyle: LabelStyle {
+    func makeBody(configuration: Configuration) -> some View {
+        HStack(
+            alignment: .center,
+            spacing: 16
+        ) {
+            configuration.icon
+                .frame(width: 44)
+            
+            configuration.title
+                .frame(maxWidth: .infinity, alignment: .leading)
+        }
+    }
+}
+
+// MARK: - Previews
+
+#Preview("List Item component") {
+    List {
+        ListItem(
+            repository: .init(
+                .init(filePath: "/full/path/to/repository/name.git")!,
+                sortOrder: 0
+            )
+        )
+        ListItem(
+            repository: .init(
+                .init(filePath: "/full/path/to/repository/name.git")!,
+                sortOrder: 0
+            )
+        )
+        ListItem(
+            repository: .init(
+                .init(filePath: "/full/path/to/repository/name.git")!,
+                sortOrder: 0
+            )
+        )
+    }
+    .frame(width: 400, height: 220)
+}