Update App.js, new modular structure

src/components/Settings.js

@@ -0,0 +1,153 @@
+import React from 'react';
+import NumericInput from './NumericInput.js';
+
+const Settings = ({
+  pkParams,
+  therapeuticRange,
+  uiSettings,
+  onUpdatePkParams,
+  onUpdateTherapeuticRange,
+  onUpdateUiSetting,
+  onReset
+}) => {
+  const { showDayTimeXAxis, yAxisMin, yAxisMax, simulationDays, displayedDays } = uiSettings;
+
+  return (
+    <div className="bg-white p-5 rounded-lg shadow-sm border">
+      <h2 className="text-xl font-semibold mb-4 text-gray-700">Erweiterte Einstellungen</h2>
+      <div className="space-y-4 text-sm">
+        <div className="flex items-center">
+          <input
+            type="checkbox"
+            id="showDayTimeXAxis"
+            checked={showDayTimeXAxis}
+            onChange={e => onUpdateUiSetting('showDayTimeXAxis', e.target.checked)}
+            className="h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-500"
+          />
+          <label htmlFor="showDayTimeXAxis" className="ml-3 block font-medium text-gray-600">
+            24h-Zeitachse anzeigen
+          </label>
+        </div>
+
+        <label className="block font-medium text-gray-600 pt-2">Simulationsdauer</label>
+        <div className="w-40">
+          <NumericInput
+            value={simulationDays}
+            onChange={val => onUpdateUiSetting('simulationDays', val)}
+            increment={'1'}
+            min={2}
+            max={7}
+            unit="Tage"
+          />
+        </div>
+
+        <label className="block font-medium text-gray-600">Angezeigte Tage</label>
+        <div className="w-40">
+          <NumericInput
+            value={displayedDays}
+            onChange={val => onUpdateUiSetting('displayedDays', val)}
+            increment={'1'}
+            min={1}
+            max={parseInt(simulationDays, 10) || 1}
+            unit="Tage"
+          />
+        </div>
+
+        <label className="block font-medium text-gray-600 pt-2">Y-Achsen-Bereich</label>
+        <div className="flex items-center space-x-2 mt-1">
+          <div className="w-32">
+            <NumericInput
+              value={yAxisMin}
+              onChange={val => onUpdateUiSetting('yAxisMin', val)}
+              increment={'5'}
+              min={0}
+              placeholder="Auto"
+              unit="ng/ml"
+            />
+          </div>
+          <span className="text-gray-500">-</span>
+          <div className="w-32">
+            <NumericInput
+              value={yAxisMax}
+              onChange={val => onUpdateUiSetting('yAxisMax', val)}
+              increment={'5'}
+              min={0}
+              placeholder="Auto"
+              unit="ng/ml"
+            />
+          </div>
+        </div>
+
+        <label className="block font-medium text-gray-600">Therapeutischer Bereich</label>
+        <div className="flex items-center space-x-2 mt-1">
+          <div className="w-32">
+            <NumericInput
+              value={therapeuticRange.min}
+              onChange={val => onUpdateTherapeuticRange('min', val)}
+              increment={'0.5'}
+              min={0}
+              placeholder="Min"
+              unit="ng/ml"
+            />
+          </div>
+          <span className="text-gray-500">-</span>
+          <div className="w-32">
+            <NumericInput
+              value={therapeuticRange.max}
+              onChange={val => onUpdateTherapeuticRange('max', val)}
+              increment={'0.5'}
+              min={0}
+              placeholder="Max"
+              unit="ng/ml"
+            />
+          </div>
+        </div>
+
+        <h3 className="text-lg font-semibold mt-4 pt-4 border-t">d-Amphetamin Parameter</h3>
+        <div className="w-40">
+          <label className="block font-medium text-gray-600">Halbwertszeit</label>
+          <NumericInput
+            value={pkParams.damph.halfLife}
+            onChange={val => onUpdatePkParams('damph', { halfLife: val })}
+            increment={'0.5'}
+            min={0.1}
+            unit="h"
+          />
+        </div>
+
+        <h3 className="text-lg font-semibold mt-4 pt-4 border-t">Lisdexamfetamin Parameter</h3>
+        <div className="w-40">
+          <label className="block font-medium text-gray-600">Umwandlungs-Halbwertszeit</label>
+          <NumericInput
+            value={pkParams.ldx.halfLife}
+            onChange={val => onUpdatePkParams('ldx', { halfLife: val })}
+            increment={'0.1'}
+            min={0.1}
+            unit="h"
+          />
+        </div>
+        <div className="w-40">
+          <label className="block font-medium text-gray-600">Absorptionsrate</label>
+          <NumericInput
+            value={pkParams.ldx.absorptionRate}
+            onChange={val => onUpdatePkParams('ldx', { absorptionRate: val })}
+            increment={'0.1'}
+            min={0.1}
+            unit="(schneller >)"
+          />
+        </div>
+
+        <div className="pt-4">
+          <button
+            onClick={onReset}
+            className="w-full bg-red-600 text-white py-2 rounded-md hover:bg-red-700 text-sm"
+          >
+            Alle Einstellungen zurücksetzen
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Settings;