Profile Header

// Profile Header · syxUI · https://syxui.dev/components/hdr-profile
// Free in any project. Keep this line and credit syxUI where a person can read it.

import SwiftUI

// Profile header - avatar, handle, inline stats, edit
struct HeaderProfile: View {
    var body: some View {
        VStack(spacing: 14) {
            HStack(spacing: 14) {
                Image("person_1").resizable().scaledToFill().frame(width: 68, height: 68).clipShape(Circle())
                VStack(alignment: .leading, spacing: 3) {
                    Text("Amara Kelly").font(.system(size: 20, weight: .bold))
                    Text("Product Designer · SF").font(.system(size: 13)).foregroundStyle(.secondary)
                }
                Spacer()
            }
            HStack(spacing: 0) {
                ForEach([("248", "Posts"), ("12.4k", "Followers"), ("380", "Following")], id: \.0) { v, l in
                    VStack(spacing: 2) {
                        Text(v).font(.system(size: 17, weight: .bold))
                        Text(l).font(.system(size: 12)).foregroundStyle(.secondary)
                    }.frame(maxWidth: .infinity)
                }
            }
        }.frame(width: 340)
    }
}