Accent Coach Mark

// Accent Coach Mark · syxUI · https://syxui.dev/components/tip-coach-blue
// Free in any project. Keep this line and credit syxUI where a person can read it.

import SwiftUI

let ttBlue = Color(red: 0.0, green: 0.47, blue: 1.0)

struct CoachmarkBlue: View { var body: some View { VStack(spacing: -2) { Image(systemName: "arrowtriangle.up.fill").font(.system(size: 12)).foregroundStyle(ttBlue); VStack(alignment: .leading, spacing: 10) { HStack(alignment: .top) { Text("Easily add groups, columns and items to manage your work").font(.system(size: 14, weight: .medium)).foregroundStyle(.white); Image(systemName: "xmark").font(.system(size: 12, weight: .bold)).foregroundStyle(.white.opacity(0.8)) }; HStack { Text("3 of 3").font(.system(size: 12)).foregroundStyle(.white.opacity(0.75)); Spacer(); Text("Finish").font(.system(size: 14, weight: .semibold)).foregroundStyle(ttBlue).padding(.horizontal, 16).padding(.vertical, 7).background(.white, in: Capsule()) } }.padding(14).frame(width: 270).background(ttBlue, in: RoundedRectangle(cornerRadius: 14, style: .continuous)) } } }