wake-ios/wake/View/BlindBox/SecondOnboardingView.swift

105 lines
4.3 KiB
Swift

import SwiftUI
/// A dedicated page to explain the "second" blind box requirement
/// and guide the user to upload 20 images and 5 videos without mixing
/// with the generic MediaUploadView responsibilities.
struct SecondOnboardingView: View {
@EnvironmentObject private var router: Router
var body: some View {
ZStack {
Color.themeTextWhiteSecondary.ignoresSafeArea()
VStack(spacing: 0) {
// Simple header
SimpleNaviHeader(title: "Create Your Second Blind Box") {
router.pop()
}
.padding(.top, UIApplication.shared.windows.first?.safeAreaInsets.top ?? 0)
VStack(spacing: 20) {
// Hero / Illustration
SVGImageHtml(svgName: "IP1")
.frame(width: 140, height: 80)
.padding(.top, 24)
VStack(spacing: 8) {
Text("Upload Requirements")
.font(Typography.font(for: .title2, family: .quicksandBold))
.foregroundColor(.themeTextMessageMain)
Text("To generate your next blind box, please upload:")
.font(Typography.font(for: .body))
.foregroundColor(.themeTextMessage)
VStack(alignment: .leading, spacing: 6) {
HStack(spacing: 8) {
SVGImage(svgName: "Upload").frame(width: 20, height: 20)
Text("20 Images")
.font(Typography.font(for: .body))
.foregroundColor(.themeTextMessageMain)
}
HStack(spacing: 8) {
SVGImage(svgName: "Upload").frame(width: 20, height: 20)
Text("5 Videos")
.font(Typography.font(for: .body))
.foregroundColor(.themeTextMessageMain)
}
}
.padding(.top, 4)
}
.padding(.horizontal)
// Tips
HStack(spacing: 6) {
SVGImage(svgName: "Tips").frame(width: 16, height: 16)
Text("Higher quality media helps create better memories.")
.font(.caption)
.foregroundColor(.black)
.frame(maxWidth: .infinity, alignment: .leading)
.padding(3)
}
.background(Color.themeTextWhite.cornerRadius(6))
.padding(.horizontal)
Spacer()
// Primary CTAs
VStack(spacing: 12) {
Button(action: {
router.navigate(to: .mediaUpload)
}) {
Text("Start Uploading")
.font(.headline)
.foregroundColor(.themeTextMessageMain)
.frame(maxWidth: .infinity)
.frame(height: 56)
.background(Color.themePrimary)
.cornerRadius(28)
.padding(.horizontal, 24)
}
Button(action: {
router.navigate(to: .userInfo)
}) {
Text("Upload Avatar First")
.font(.subheadline)
.foregroundColor(.themeTextMessage)
}
.padding(.bottom, 24)
}
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.white)
.cornerRadius(16)
.padding()
Spacer()
}
}
.navigationBarBackButtonHidden(true)
}
}
#Preview {
SecondOnboardingView().environmentObject(Router.shared)
}