Files
Sportstime/SportsTime/Features/Trip/Views/Wizard/Steps/DatesStep.swift
Trey t bddbebee32 feat(wizard): add all wizard step components
- DatesStep: date range selection with duration indicator
- RegionsStep: geographic region selection
- RoutePreferenceStep: direct/scenic/balanced preference
- RepeatCitiesStep: unique vs repeat city visits
- MustStopsStep: optional must-stop locations
- ReviewStep: summary and plan button

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-12 20:48:27 -06:00

99 lines
3.0 KiB
Swift

//
// DatesStep.swift
// SportsTime
//
// Step 3 of the trip wizard - select travel dates.
//
import SwiftUI
struct DatesStep: View {
@Environment(\.colorScheme) private var colorScheme
@Binding var startDate: Date
@Binding var endDate: Date
@Binding var hasSetDates: Bool
let onDatesChanged: () -> Void
var body: some View {
VStack(alignment: .leading, spacing: Theme.Spacing.md) {
StepHeader(
title: "When would you like to travel?",
subtitle: "Pick your trip dates"
)
VStack(spacing: Theme.Spacing.md) {
DatePicker(
"Start Date",
selection: $startDate,
in: Date()...,
displayedComponents: .date
)
.datePickerStyle(.compact)
.onChange(of: startDate) { _, newValue in
// Ensure end date is after start date
if endDate < newValue {
endDate = newValue.addingTimeInterval(86400)
}
hasSetDates = true
onDatesChanged()
}
DatePicker(
"End Date",
selection: $endDate,
in: startDate...,
displayedComponents: .date
)
.datePickerStyle(.compact)
.onChange(of: endDate) { _, _ in
hasSetDates = true
onDatesChanged()
}
}
.padding(Theme.Spacing.sm)
.background(Theme.cardBackgroundElevated(colorScheme))
.clipShape(RoundedRectangle(cornerRadius: Theme.CornerRadius.medium))
// Trip duration indicator
HStack {
Image(systemName: "calendar.badge.clock")
.foregroundStyle(Theme.textMuted(colorScheme))
Text(durationText)
.font(.subheadline)
.foregroundStyle(Theme.textSecondary(colorScheme))
}
}
.padding(Theme.Spacing.lg)
.background(Theme.cardBackground(colorScheme))
.clipShape(RoundedRectangle(cornerRadius: Theme.CornerRadius.large))
.overlay {
RoundedRectangle(cornerRadius: Theme.CornerRadius.large)
.stroke(Theme.surfaceGlow(colorScheme), lineWidth: 1)
}
}
private var durationText: String {
let days = Calendar.current.dateComponents([.day], from: startDate, to: endDate).day ?? 0
if days == 0 {
return "Same day trip"
} else if days == 1 {
return "1 day trip"
} else {
return "\(days) day trip"
}
}
}
// MARK: - Preview
#Preview {
DatesStep(
startDate: .constant(Date()),
endDate: .constant(Date().addingTimeInterval(86400 * 5)),
hasSetDates: .constant(true),
onDatesChanged: {}
)
.padding()
.themedBackground()
}