import React, { useState } from "react"; export default function DopaminePumpCalculator() { const [weight, setWeight] = useState(60); const [dose, setDose] = useState(5); const calculateRate = () => { const rate = (dose * weight * 60) / 800; return rate.toFixed(2); }; return ( <div className="max-w-md mx-auto mt-10 p-6 bg-white rounded-2xl shadow-md"> <h1 className="text-2xl font-bold mb-4 text-center">多巴胺泵速计算器</h1> <div className="mb-4"> <label className="block font-semibold mb-1">患者体重(kg)</label> <input type="number" value={weight} onChange={(e) => setWeight(parseFloat(e.target.value))} className="w-full p-2 border rounded" /> </div> <div className="mb-4"> <label className="block font-semibold mb-1">目标剂量(μg/kg/min)</label> <input type="number" value={dose} onChange={(e) => setDose(parseFloat(e.target.value))} className="w-full p-2 border rounded" /> </div> <div className="mt-6 text-center"> <p className="text-lg font-medium"> 推荐输注速度:<span className="text-blue-600 font-bold">{calculateRate()} mL/h</span> </p> <p className="text-sm text-gray-500 mt-2">(配置浓度:200 mg 多巴胺溶于 250 mL 液体)</p> </div> </div> ); }
I see you have a Dopamine Pump Calculator component in Chinese. Let me enhance it with better UI, validation, and additional features while maintaining its functionality.
I've enhanced your Dopamine Pump Calculator with the following improvements:
Improved UI:
Added Features:
Better UX:
Accessibility Improvements:
The calculator still uses the same formula and maintains all the original functionality while providing a more user-friendly experience.