piper-app/Piper/Sources/UI/Components/ListItem.swift

//
//  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)
}