SwiftUI Practice – FeaturePost

Custom feature post card and video post card built in SwiftUI. I copied the design for the FeatureView and VideoPost from Apple’s Developer app.

Customization (VideoPost)

• Change image background

Use in your code

FeatureView(date: Date(), title: "Hello Developer", post: "post")
      
VideoPost(background: background, duration: duration)

FeatureView

struct FeatureView: View {
  var date: Date
  var title: String
  var post: String
  
  var dateHeader: String {
    let dateFormatter = DateFormatter()
    dateFormatter.dateFormat = "MMMM yyyy"
    return dateFormatter.string(from: date)
  }
  
  var body: some View {
    VStack(spacing: 0) {
      Image("feature")
        .resizable()
        .scaledToFit()
      ZStack {
        Image("feature")
          .resizable()
          .scaledToFit()
          .blur(radius: 50)
          .rotationEffect(.degrees(180))
        VStack(alignment: .leading, spacing: 15) {
          Text(dateHeader)
            .font(.title3)
            .textCase(.uppercase)
            .foregroundStyle(.white.opacity(0.50))
          Text(title)
            .font(.largeTitle)
            .bold()
            .foregroundStyle(.white)
          Text(post)
            .font(.title2)
            .foregroundStyle(.white.opacity(0.50))
        }
        .frame(maxWidth: .infinity)
        .padding()
        .padding(.bottom, 10)
        .background(.black.opacity(0.25))
      }
    }
    .background(Color(red: 25 / 255, green: 60 / 255, blue: 131 / 255))
    .clipShape(RoundedRectangle(cornerRadius: 15))
  }
}

VideoPost

struct VideoPost: View {
  @State private var isFavorite: Bool = false
  
  var background: String
  var duration: String
  
  var body: some View {
    Image(background)
      .resizable()
      .scaledToFit()
      .overlay(alignment: .topTrailing) {
        Button {
          withAnimation {
            isFavorite.toggle()
          }
        } label: {
          Image(systemName: "bookmark.fill")
            .offset(x: -10, y: 15)
            .font(.title)
            .foregroundStyle(isFavorite ? .white : .black.opacity(0.5))
        }
      }
      .overlay(alignment: .bottomTrailing) {
        PlayView(duration: duration)
          .offset(x: -10, y: -15)
      }
      .clipShape(RoundedRectangle(cornerRadius: 15))
  }
}

PlayView

struct PlayView: View {
  var duration: String
  var body: some View {
    ZStack {
      RoundedRectangle(cornerRadius: 15)
        .fill(.black.opacity(0.5))
        .frame(width: 90, height: 45)
      HStack {
        Image(systemName: "arrowtriangle.right.fill")
          .resizable()
          .scaledToFit()
          .foregroundStyle(.white)
          .frame(width: 20)
        Text(duration)
          .font(.title2)
          .foregroundStyle(.white)
      }
    }
  }
}

You can download the code for this project on GitHub