/// AvatarOverlay
struct AvatarOverlay: View {

    /// image
    let image: String

    /// gradient colors
    let colors: [Color] = [Color.gray.opacity(0.5), Color.gray.opacity(0)]

    /// gradient
    var gradient: LinearGradient {
        LinearGradient(gradient: Gradient(colors: colors),
                       startPoint: .topLeading, endPoint: .center)
    }

    /// body
    var body: some View {

        // ZStack - places views above each other
        ZStack(alignment: .topLeading) {

            // create a rectagular gradient from topleading edge to center edge
            Rectangle().fill(gradient).cornerRadius(8)

            // create avatar image above the gradient
            AvatarView(image: image, size: 36)
                .padding(.leading, 8)
                .padding(.top, 8)
        }
    }
}