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:
gpt-engineer-app[bot]
2025-11-11 23:01:28 +00:00
parent 2f579b08ba
commit 9a3fbb2f78
2 changed files with 46 additions and 2 deletions

View File

@@ -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