Add advanced form editors

src/components/admin/RideModelForm.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import * as z from 'zod';
@@ -12,6 +13,7 @@ import { SlugField } from '@/components/ui/slug-field';
 import { Layers, Save, X } from 'lucide-react';
 import { useUserRole } from '@/hooks/useUserRole';
 import { EntityMultiImageUploader, ImageAssignments } from '@/components/upload/EntityMultiImageUploader';
+import { TechnicalSpecsEditor } from './editors/TechnicalSpecsEditor';
 
 const rideModelSchema = z.object({
   name: z.string().min(1, 'Name is required'),
@@ -60,6 +62,7 @@ export function RideModelForm({
   initialData 
 }: RideModelFormProps) {
   const { isModerator } = useUserRole();
+  const [technicalSpecs, setTechnicalSpecs] = useState<any[]>([]);
   
   const {
     register,
@@ -166,15 +169,20 @@ export function RideModelForm({
           </div>
 
           {/* Technical Specs */}
-          <div className="space-y-2">
-            <Label htmlFor="technical_specs">Technical Specifications</Label>
-            <Textarea
-              id="technical_specs"
-              {...register('technical_specs')}
-              placeholder="Enter technical specifications (e.g., track length, inversions, typical speed range)..."
-              rows={3}
+          <div className="border-t pt-6">
+            <TechnicalSpecsEditor
+              specs={technicalSpecs}
+              onChange={setTechnicalSpecs}
+              commonSpecs={[
+                'Typical Track Length',
+                'Typical Height',
+                'Typical Speed',
+                'Standard Train Configuration',
+                'Typical Capacity',
+                'Typical Duration'
+              ]}
             />
-            <p className="text-xs text-muted-foreground">
+            <p className="text-xs text-muted-foreground mt-2">
               General specifications for this model that apply to all installations
             </p>
           </div>