mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-24 12:51:14 -05:00
Expand help text for complex fields
Add user-facing guidance texts and tooltips to additional complex form fields beyond date precision, including ParkForm and RideForm enhancements: - Introduce contextual help sections with Info icons for Park Type, Status, Location, Operator/Owner, Source URL, and Submission Notes - Add guidance for RideForm fields such as Category, Status, Manufacturer/Model context, and Technical specifications - Ensure consistent muted help text styling and accessibility across forms - Extend lines with inline Help/Info components to improve user understanding and reduce input errors
This commit is contained in:
@@ -17,7 +17,7 @@ import { FlexibleDateInput, type DatePrecision } from '@/components/ui/flexible-
|
||||
import { SlugField } from '@/components/ui/slug-field';
|
||||
import { toast } from '@/hooks/use-toast';
|
||||
import { handleError } from '@/lib/errorHandler';
|
||||
import { MapPin, Save, X, Plus, AlertCircle } from 'lucide-react';
|
||||
import { MapPin, Save, X, Plus, AlertCircle, Info } from 'lucide-react';
|
||||
import { toDateOnly, parseDateOnly, toDateWithPrecision } from '@/lib/dateUtils';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Combobox } from '@/components/ui/combobox';
|
||||
@@ -370,6 +370,10 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<div className="flex items-start gap-2 text-xs text-muted-foreground">
|
||||
<Info className="h-3.5 w-3.5 mt-0.5 flex-shrink-0" />
|
||||
<p>Choose the primary classification. Theme parks have themed areas, while amusement parks focus on rides.</p>
|
||||
</div>
|
||||
{errors.park_type && (
|
||||
<p className="text-sm text-destructive">{errors.park_type.message}</p>
|
||||
)}
|
||||
@@ -395,6 +399,10 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
|
||||
})}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<div className="flex items-start gap-2 text-xs text-muted-foreground">
|
||||
<Info className="h-3.5 w-3.5 mt-0.5 flex-shrink-0" />
|
||||
<p>Current operational status. Use "Closed Temporarily" for seasonal closures or renovations.</p>
|
||||
</div>
|
||||
{errors.status && (
|
||||
<p className="text-sm text-destructive">{errors.status.message}</p>
|
||||
)}
|
||||
@@ -446,6 +454,10 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
|
||||
}}
|
||||
initialLocationId={watch('location_id')}
|
||||
/>
|
||||
<div className="flex items-start gap-2 text-xs text-muted-foreground">
|
||||
<Info className="h-3.5 w-3.5 mt-0.5 flex-shrink-0" />
|
||||
<p>Search by park name, address, or city. Select from results to auto-fill coordinates and timezone.</p>
|
||||
</div>
|
||||
{errors.location && (
|
||||
<p className="text-sm text-destructive flex items-center gap-1">
|
||||
<AlertCircle className="w-4 h-4" />
|
||||
@@ -462,6 +474,10 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
|
||||
{/* Operator & Property Owner Selection */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">Operator & Property Owner</h3>
|
||||
<div className="flex items-start gap-2 text-xs text-muted-foreground mb-3">
|
||||
<Info className="h-3.5 w-3.5 mt-0.5 flex-shrink-0" />
|
||||
<p>The operator runs the park, while the property owner owns the land. Often the same entity.</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2 mb-4">
|
||||
<Checkbox
|
||||
|
||||
Reference in New Issue
Block a user