Implemented the DocumentItem view component and also, moved some UI code to the Image+Helpers and Text+Helpers extensions.

BeReal.xcodeproj/project.pbxproj

@@ -15,6 +15,9 @@
 		02AE650A29363DC1005A4AF3 /* BeRealUITests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02AE650929363DC1005A4AF3 /* BeRealUITests.swift */; };
 		02AE650C29363DC1005A4AF3 /* BeRealUITestsLaunchTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02AE650B29363DC1005A4AF3 /* BeRealUITestsLaunchTests.swift */; };
 		02B334E8293A93DC00C45E31 /* FolderItem.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02B334E7293A93DC00C45E31 /* FolderItem.swift */; };
+		02CE5554293B130100730DC9 /* DocumentItem.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02CE5553293B130100730DC9 /* DocumentItem.swift */; };
+		02CE5557293B134200730DC9 /* Image+Helpers.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02CE5556293B134200730DC9 /* Image+Helpers.swift */; };
+		02CE5559293B1AB600730DC9 /* Text+Helpers.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02CE5558293B1AB600730DC9 /* Text+Helpers.swift */; };
 		02FFFD7B29395DD200306533 /* String+Constants.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02FFFD7A29395DD200306533 /* String+Constants.swift */; };
 		4694AAA0293A7C8800D54903 /* Modules in Frameworks */ = {isa = PBXBuildFile; productRef = 4694AA9F293A7C8800D54903 /* Modules */; };
 /* End PBXBuildFile section */
@@ -49,6 +52,9 @@
 		02AE650929363DC1005A4AF3 /* BeRealUITests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BeRealUITests.swift; sourceTree = "<group>"; };
 		02AE650B29363DC1005A4AF3 /* BeRealUITestsLaunchTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BeRealUITestsLaunchTests.swift; sourceTree = "<group>"; };
 		02B334E7293A93DC00C45E31 /* FolderItem.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FolderItem.swift; sourceTree = "<group>"; };
+		02CE5553293B130100730DC9 /* DocumentItem.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DocumentItem.swift; sourceTree = "<group>"; };
+		02CE5556293B134200730DC9 /* Image+Helpers.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "Image+Helpers.swift"; sourceTree = "<group>"; };
+		02CE5558293B1AB600730DC9 /* Text+Helpers.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "Text+Helpers.swift"; sourceTree = "<group>"; };
 		02FFFD7A29395DD200306533 /* String+Constants.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "String+Constants.swift"; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
@@ -141,6 +147,7 @@
 		02B334E2293A908800C45E31 /* Browse */ = {
 			isa = PBXGroup;
 			children = (
+				02CE5555293B131D00730DC9 /* Extensions */,
 				02B334E6293A93CE00C45E31 /* Components */,
 				02B334E5293A93C400C45E31 /* Views */,
 			);
@@ -158,10 +165,20 @@
 			isa = PBXGroup;
 			children = (
 				02B334E7293A93DC00C45E31 /* FolderItem.swift */,
+				02CE5553293B130100730DC9 /* DocumentItem.swift */,
 			);
 			path = Components;
 			sourceTree = "<group>";
 		};
+		02CE5555293B131D00730DC9 /* Extensions */ = {
+			isa = PBXGroup;
+			children = (
+				02CE5556293B134200730DC9 /* Image+Helpers.swift */,
+				02CE5558293B1AB600730DC9 /* Text+Helpers.swift */,
+			);
+			path = Extensions;
+			sourceTree = "<group>";
+		};
 		02FFFD7929395DBF00306533 /* Extensions */ = {
 			isa = PBXGroup;
 			children = (
@@ -313,6 +330,9 @@
 			files = (
 				02B334E8293A93DC00C45E31 /* FolderItem.swift in Sources */,
 				02AE64F129363DBF005A4AF3 /* ContentView.swift in Sources */,
+				02CE5554293B130100730DC9 /* DocumentItem.swift in Sources */,
+				02CE5557293B134200730DC9 /* Image+Helpers.swift in Sources */,
+				02CE5559293B1AB600730DC9 /* Text+Helpers.swift in Sources */,
 				02AE64EF29363DBF005A4AF3 /* BeRealApp.swift in Sources */,
 				02FFFD7B29395DD200306533 /* String+Constants.swift in Sources */,
 			);

BeReal/Browse/Components/DocumentItem.swift

@@ -0,0 +1,71 @@
+//
+//  DocumentItem.swift
+//  Browse
+//
+//  Created by Javier Cicchelli on 03/12/2022.
+//  Copyright © 2022 Röck+Cöde. All rights reserved.
+//
+
+import SwiftUI
+
+struct DocumentItem: View {
+    
+    // MARK: Properties
+    
+    let name: String
+    let lastModified: String
+    let fileSize: String
+    
+    // MARK: Body
+    
+    var body: some View {
+        HStack(spacing: 16) {
+            Image.document
+                .icon(size: 32)
+                .foregroundColor(.red)
+            
+            VStack {
+                Text(name)
+                    .itemName()
+                
+                HStack {
+                    Text(lastModified)
+                    
+                    Spacer()
+                    
+                    Text(fileSize)
+                }
+                .font(.subheadline)
+                .foregroundColor(.secondary)
+            }
+        }
+        .padding(16)
+    }
+
+}
+
+// MARK: - Image+Constants
+
+private extension Image {
+    static let document = Image(systemName: "doc.fill")
+}
+
+// MARK: - Previews
+
+struct DocumentItem_Previews: PreviewProvider {
+    static var previews: some View {
+        DocumentItem(
+            name: "Some document name goes in here...",
+            lastModified: "Some few hours ago",
+            fileSize: "23,5 Mbytes"
+        )
+        .previewDisplayName("Document item")
+        
+        DocumentItem(
+            name: "Some very, extremely long document name goes in here...",
+            lastModified: "Yesterday",
+            fileSize: "235,6 Kbytes"
+        )
+        .previewDisplayName("Document item with long name")
+    }
+}

BeReal/Browse/Components/FolderItem.swift

@@ -23,11 +23,7 @@ struct FolderItem: View {
                 .foregroundColor(.red)
             
             Text(name)
-                .font(.headline)
+                .itemName()
-                .foregroundColor(.primary)
-                .lineLimit(1)
-                .truncationMode(.middle)
-                .frame(maxWidth: .infinity, alignment: .leading)
             
             Image.chevronRight
                 .icon(size: 16)
@@ -39,26 +35,11 @@ struct FolderItem: View {
 
 }
 
-// MARK: - Image
+// MARK: - Image+Constants
 
 private extension Image {
-    
-    // MARK: Constants
-    
     static let folder = Image(systemName: "folder.fill")
-    static let document = Image(systemName: "doc.fill")
     static let chevronRight = Image(systemName: "chevron.right")
-    
-    // MARK: Functions
-    
-    func icon(size: CGFloat) -> some View {
-        self
-            .resizable()
-            .renderingMode(.template)
-            .scaledToFit()
-            .frame(width: size, height: size)
-    }
-
 }
 
 // MARK: - Previews
@@ -66,9 +47,9 @@ private extension Image {
 struct BrowseItem_Previews: PreviewProvider {
     static var previews: some View {
         FolderItem(name: "Some folder name goes in here...")
-            .previewDisplayName("Browse item for folders")
+            .previewDisplayName("Folder item")
         
         FolderItem(name: "Some very, extremely long folder name goes in here...")
-            .previewDisplayName("Browse item for folders with long name")
+            .previewDisplayName("Folder item with long name")
     }
 }

BeReal/Browse/Extensions/Image+Helpers.swift

@@ -0,0 +1,24 @@
+//
+//  Image+Helpers.swift
+//  Browse
+//
+//  Created by Javier Cicchelli on 03/12/2022.
+//  Copyright © 2022 Röck+Cöde. All rights reserved.
+//
+
+import SwiftUI
+
+extension Image {
+
+    /// Resizes an image to a given size.
+    /// - Parameter size: A size to which an image will be resized.
+    /// - Returns: An resized image rendered as an erasured view.
+    func icon(size: CGFloat) -> some View {
+        self
+            .resizable()
+            .renderingMode(.template)
+            .scaledToFit()
+            .frame(width: size, height: size)
+    }
+
+}

BeReal/Browse/Extensions/Text+Helpers.swift

@@ -0,0 +1,23 @@
+//
+//  Text+Helpers.swift
+//  BeReal
+//
+//  Created by Javier Cicchelli on 03/12/2022.
+//  Copyright © 2022 Röck+Cöde. All rights reserved.
+//
+
+import SwiftUI
+
+extension Text {
+    
+    /// Renders a text for the name of a folder or document item.
+    /// - Returns: A formatted text rendered as an erasured view.
+    func itemName() -> some View {
+        self
+            .font(.headline)
+            .lineLimit(1)
+            .truncationMode(.middle)
+            .foregroundColor(.primary)
+            .frame(maxWidth: .infinity, alignment: .leading)
+    }
+}