Text và Image trong SwiftUI

Text("Hello, SwiftUI!")

Text("Title")
    .font(.largeTitle)
 
Text("Headline")
    .font(.headline)
 
Text("Body text")
    .font(.body)
 
Text("Caption")
    .font(.caption)
 
// Custom font
Text("Custom")
    .font(.system(size: 24, weight: .bold, design: .rounded))
 
Text("SF Mono")
    .font(.system(.body, design: .monospaced))

Text("Styled Text")
    .font(.title)
    .fontWeight(.bold)
    .foregroundColor(.blue)
    .italic()
    .underline()
    .strikethrough()

Text("This is a very long text that will wrap to multiple lines automatically in SwiftUI")
    .lineLimit(3)          // Giới hạn số dòng
    .truncationMode(.tail) // Cắt ở cuối
    .multilineTextAlignment(.center)

// Date
Text(Date(), style: .date)
Text(Date(), style: .time)
Text(Date(), format: .dateTime.day().month().year())
 
// Number
Text(42.5, format: .number.precision(.fractionLength(2)))
Text(1234.56, format: .currency(code: "USD"))
 
// Attributed String
Text("Hello ") + Text("World").bold().foregroundColor(.red)

Text("This is **bold** and this is *italic*")
Text("Click [here](https://apple.com)")
Text("Code: `print()`")

Image("photo")  // Tên trong Assets.xcassets
    .resizable()
    .aspectRatio(contentMode: .fit)
    .frame(width: 200, height: 200)

Image(systemName: "heart.fill")
    .font(.largeTitle)
    .foregroundColor(.red)
 
Image(systemName: "star.fill")
    .imageScale(.large)
    .symbolRenderingMode(.multicolor)

Image("landscape")
    .resizable()                    // Cho phép resize
    .aspectRatio(contentMode: .fill) // fill hoặc fit
    .frame(width: 300, height: 200)
    .clipped()                      // Cắt phần thừa
    .cornerRadius(16)

// Fit: giữ tỷ lệ, fit trong frame
Image("photo")
    .resizable()
    .scaledToFit()
    .frame(width: 200, height: 200)
 
// Fill: giữ tỷ lệ, fill hết frame
Image("photo")
    .resizable()
    .scaledToFill()
    .frame(width: 200, height: 200)
    .clipped()

Image("avatar")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(width: 100, height: 100)
    .clipShape(Circle())
    .overlay(Circle().stroke(.white, lineWidth: 4))
    .shadow(radius: 10)

AsyncImage(url: URL(string: "https://example.com/image.jpg")) { phase in
    switch phase {
    case .empty:
        ProgressView()
    case .success(let image):
        image
            .resizable()
            .aspectRatio(contentMode: .fit)
    case .failure:
        Image(systemName: "photo")
            .foregroundColor(.gray)
    @unknown default:
        EmptyView()
    }
}
.frame(width: 200, height: 200)

Label("Favorites", systemImage: "heart.fill")
 
Label {
    Text("Custom Label")
        .font(.headline)
} icon: {
    Image(systemName: "star")
        .foregroundColor(.yellow)
}

HStack {
    Image(systemName: "person.circle.fill")
        .font(.title)
        .foregroundColor(.blue)
    
    VStack(alignment: .leading) {
        Text("John Doe")
            .font(.headline)
        Text("john@example.com")
            .font(.caption)
            .foregroundColor(.gray)
    }
}