pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-24 21:31:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add tooltips to technical specs editor

Browse Source 
Enhance TechnicalSpecsEditor and related ride form fields with contextual tooltips and example guidance for track materials, propulsion methods, and other spec fields to improve user understanding of expected values. Changes include importing tooltip components, adding informative tooltips for specification name, type, unit, track/material categories (e.g., track materials, propulsion methods), and updating UI to display examples inline.
This commit is contained in:
gpt-engineer-app[bot]
2025-11-11 23:03:59 +00:00
parent 9a3fbb2f78
commit 99c8c94e47
2 changed files with 126 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/components/admin/editors/TechnicalSpecsEditor.tsx
View File

@@ -1,10 +1,11 @@
import { Plus, Trash2 } from "lucide-react";
import { Plus, Trash2, HelpCircle } from "lucide-react";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Card } from "@/components/ui/card";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { useUnitPreferences } from "@/hooks/useUnitPreferences";
import { toast } from "sonner";
import {
@@ -126,14 +127,25 @@ export function TechnicalSpecsEditor({
};
return (
<div className="space-y-4">
<div className="flex items-center justify-between">
<Label>Technical Specifications</Label>
<Button type="button" variant="outline" size="sm" onClick={addSpec}>
<Plus className="h-4 w-4 mr-2" />
Add Specification
</Button>
</div>
<TooltipProvider>
<div className="space-y-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Label>Technical Specifications</Label>
<Tooltip>
<TooltipTrigger asChild>
<HelpCircle className="h-4 w-4 text-muted-foreground cursor-help" />
</TooltipTrigger>
<TooltipContent className="max-w-xs">
<p>Add custom specifications like track material (Steel, Wood), propulsion method (LSM Launch, Chain Lift), train type, etc. Use metric units only.</p>
</TooltipContent>
</Tooltip>
</div>
<Button type="button" variant="outline" size="sm" onClick={addSpec}>
<Plus className="h-4 w-4 mr-2" />
Add Specification
</Button>
</div>
{specs.length === 0 ? (
<Card className="p-6 text-center text-muted-foreground">
@@ -145,7 +157,24 @@ export function TechnicalSpecsEditor({
<Card key={index} className="p-4">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-3">
<div className="lg:col-span-2">
<Label className="text-xs">Specification Name</Label>
<div className="flex items-center gap-1">
<Label className="text-xs">Specification Name</Label>
<Tooltip>
<TooltipTrigger asChild>
<HelpCircle className="h-3 w-3 text-muted-foreground cursor-help" />
</TooltipTrigger>
<TooltipContent className="max-w-xs">
<p className="font-semibold mb-1">Examples:</p>
<ul className="text-xs space-y-1">
<li>• Track Material (Steel/Wood)</li>
<li>• Propulsion Method (LSM Launch, Chain Lift)</li>
<li>• Train Type (Sit-down, Inverted)</li>
<li>• Restraint System (Lap bar, OTSR)</li>
<li>• Launch Speed (km/h)</li>
</ul>
</TooltipContent>
</Tooltip>
</div>
<Input
value={spec.spec_name}
onChange={(e) => updateSpec(index, 'spec_name', e.target.value)}
@@ -189,7 +218,22 @@ export function TechnicalSpecsEditor({
</div>
<div>
<Label className="text-xs">Type</Label>
<div className="flex items-center gap-1">
<Label className="text-xs">Type</Label>
<Tooltip>
<TooltipTrigger asChild>
<HelpCircle className="h-3 w-3 text-muted-foreground cursor-help" />
</TooltipTrigger>
<TooltipContent className="max-w-xs">
<ul className="text-xs space-y-1">
<li>• <strong>Text:</strong> Material names, methods (e.g., "Steel", "LSM Launch")</li>
<li>• <strong>Number:</strong> Measurements with units (e.g., speed, length)</li>
<li>• <strong>Yes/No:</strong> Features (e.g., "Has VR")</li>
<li>• <strong>Date:</strong> Installation dates</li>
</ul>
</TooltipContent>
</Tooltip>
</div>
<Select
value={spec.spec_type}
onValueChange={(value) => updateSpec(index, 'spec_type', value)}
@@ -225,7 +269,23 @@ export function TechnicalSpecsEditor({
<div className="flex items-end gap-2">
<div className="flex-1">
<Label className="text-xs">Unit</Label>
<div className="flex items-center gap-1">
<Label className="text-xs">Unit</Label>
<Tooltip>
<TooltipTrigger asChild>
<HelpCircle className="h-3 w-3 text-muted-foreground cursor-help" />
</TooltipTrigger>
<TooltipContent className="max-w-xs">
<p className="font-semibold mb-1">Metric units only:</p>
<ul className="text-xs space-y-1">
<li>• Speed: km/h (not mph)</li>
<li>• Distance: m, km, cm (not ft, mi, in)</li>
<li>• Weight: kg, g (not lb, oz)</li>
<li>• Leave empty for text values</li>
</ul>
</TooltipContent>
</Tooltip>
</div>
<Input
value={spec.unit || ''}
onChange={(e) => updateSpec(index, 'unit', e.target.value)}
@@ -257,7 +317,8 @@ export function TechnicalSpecsEditor({
))}
</div>
)}
</div>
</div>
</TooltipProvider>
);
}