V3

src/components/ConfigStep.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import { AppConfig } from '../types';
+import { Ruler, Box, Layers, Minimize2 } from 'lucide-react';
+
+interface Props {
+  config: AppConfig;
+  onChange: (newConfig: AppConfig) => void;
+}
+
+const InputGroup: React.FC<{ label: string; children: React.ReactNode }> = ({ label, children }) => (
+  <div className="flex flex-col gap-2 mb-4">
+    <label className="text-sm font-medium text-gray-300">{label}</label>
+    <div className="flex gap-4">{children}</div>
+  </div>
+);
+
+const NumberInput = ({ 
+  label, 
+  value, 
+  onChange, 
+  max 
+}: { 
+  label: string; 
+  value: number; 
+  onChange: (val: number) => void; 
+  max?: number 
+}) => (
+  <div className="flex-1 relative">
+    <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 text-xs">{label}</span>
+    <input
+      type="number"
+      min="1"
+      max={max}
+      value={value}
+      onChange={(e) => onChange(parseFloat(e.target.value) || 0)}
+      className="w-full bg-slate-800 border border-slate-700 rounded p-2 pl-8 text-white focus:ring-2 focus:ring-primary outline-none"
+    />
+    <span className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 text-xs">мм</span>
+  </div>
+);
+
+export const ConfigStep: React.FC<Props> = ({ config, onChange }) => {
+  const updateDrawer = (key: keyof AppConfig['drawer'], val: number) => {
+    onChange({ ...config, drawer: { ...config.drawer, [key]: val } });
+  };
+
+  return (
+    <div className="bg-slate-900 p-6 rounded-xl shadow-lg border border-slate-800 animate-fade-in">
+      <h2 className="text-xl font-bold mb-6 flex items-center gap-2 text-primary">
+        <Box size={24} /> 1. Размеры
+      </h2>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+        {/* Drawer Dimensions */}
+        <div className="bg-slate-800/50 p-4 rounded-lg border border-slate-700">
+          <h3 className="text-lg font-semibold mb-4 flex items-center gap-2 text-gray-200">
+             <Ruler className="text-accent" size={18} /> Внутренние размеры ящика
+          </h3>
+          <InputGroup label="Ширина (X)">
+            <NumberInput label="Ш" value={config.drawer.width} onChange={(v) => updateDrawer('width', v)} />
+          </InputGroup>
+          <InputGroup label="Глубина (Y)">
+            <NumberInput label="Г" value={config.drawer.depth} onChange={(v) => updateDrawer('depth', v)} />
+          </InputGroup>
+          <InputGroup label="Высота (Z)">
+            <NumberInput label="В" value={config.drawer.height} onChange={(v) => updateDrawer('height', v)} />
+          </InputGroup>
+        </div>
+
+        {/* Settings */}
+        <div className="bg-slate-800/50 p-4 rounded-lg border border-slate-700 flex flex-col justify-center">
+           <h3 className="text-lg font-semibold mb-4 flex items-center gap-2 text-gray-200">
+             <Layers className="text-accent" size={18} /> Параметры печати
+           </h3>
+           
+           <div className="mb-6">
+             <div className="flex justify-between items-center mb-2">
+                <label className="text-sm font-medium text-gray-300">Толщина стенок</label>
+                <span className="text-primary font-bold bg-primary/10 px-2 py-1 rounded text-sm border border-primary/20">
+                  {config.wallThickness.toFixed(1)} мм
+                </span>
+             </div>
+             
+             <div className="flex items-center gap-4">
+               <span className="text-xs text-gray-500 font-mono">0.4</span>
+               <input 
+                  type="range" 
+                  min="0.4" 
+                  max="3.2" 
+                  step="0.1"
+                  value={config.wallThickness} 
+                  onChange={(e) => onChange({...config, wallThickness: parseFloat(e.target.value)})}
+                  className="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-primary hover:accent-blue-400 transition-all"
+               />
+               <span className="text-xs text-gray-500 font-mono">3.2</span>
+             </div>
+           </div>
+
+           <div className="mb-4">
+             <div className="flex justify-between items-center mb-2">
+                <label className="text-sm font-medium text-gray-300 flex items-center gap-1">
+                   <Minimize2 size={14} className="text-gray-400"/> Зазор (Tolerance)
+                </label>
+                <span className="text-accent font-bold bg-accent/10 px-2 py-1 rounded text-sm border border-accent/20">
+                  {config.printerTolerance.toFixed(1)} мм
+                </span>
+             </div>
+             
+             <div className="flex items-center gap-4">
+               <span className="text-xs text-gray-500 font-mono">0.0</span>
+               <input 
+                  type="range" 
+                  min="0.0" 
+                  max="2.0" 
+                  step="0.1"
+                  value={config.printerTolerance} 
+                  onChange={(e) => onChange({...config, printerTolerance: parseFloat(e.target.value)})}
+                  className="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-accent hover:accent-amber-400 transition-all"
+               />
+               <span className="text-xs text-gray-500 font-mono">2.0</span>
+             </div>
+           </div>
+
+           <div className="bg-slate-900/50 p-3 rounded border border-slate-700/50">
+             <p className="text-xs text-gray-400 leading-relaxed">
+               <span className="text-accent font-semibold">Зазор</span> уменьшает размер каждой ячейки, чтобы они легко вставлялись в ящик и друг в друга. Рекомендуется 0.5 мм.
+             </p>
+           </div>
+        </div>
+      </div>
+    </div>
+  );
+};