CHResume/ResumeBuilder/Main Elements/TitledIconSection.swift

import SwiftUI

extension String: Identifiable {

    public var id: String {
        self
    }
}

extension View {
    public func addBorder<S>(_ content: S, width: CGFloat = 1, cornerRadius: CGFloat) -> some View where S : ShapeStyle {
        let roundedRect = RoundedRectangle(cornerRadius: cornerRadius)
        return clipShape(roundedRect)
            .overlay(roundedRect.strokeBorder(content, lineWidth: width))
    }
}

struct TitledIconSection: View {

    let content: Titled<SkillsSet>

    let titleSpacing: CGFloat

    let width: CGFloat

    let style: SkillStyle

    var body: some View {
        TitledSection(title: content.title, spacing: titleSpacing) {
            VStack(alignment: .leading) {
                ForEach(content.items) { item in
                    HStack(alignment: .firstTextBaseline) {
                        Image(systemSymbol: item.systemSymbol)
                            .frame(
                                width: style.iconSize,
                                height: style.iconSize)
                            .padding(.leading, style.horizontalGap)
                        FlowLayout(alignment: .leading, spacing: style.verticalTagSpacing) {
                            ForEach(item.entries) { tag in
                                TagView(
                                    tag,
                                    rounding: style.tagRounding,
                                    color: style.tagBackground)
                            }
                        }
                    }.padding(.bottom, style.rowSpacing)
                }
            }
        }
    }
}

struct TitledIconSection_Previews: PreviewProvider {
    static var previews: some View {
        TitledIconSection(
            content: .init(title: "Title", items: [
                .init(systemSymbol: .keyboard, entries: ["Swift", "C", "C++", "Python"])
            ]),
            titleSpacing: 10,
            width: 200, style: SkillStyle())
        .previewLayout(.fixed(width: 230, height: 300))
    }
}