Untitled

const velFieldDescriptions = {
    speed: { description: "Speed:", placeholderText: "mph" }
};

const speedFieldDescriptions = {
    velocity: { description: "Velocity:", placeholderText: "fps" }
};

const toggleFieldDescriptions = {
    conversionType: "Velocity to Speed / Speed to Velocity",
};

function SpeedAndVelocityConverter() {
    const [fields, setFields] = useState({
        speed: 0,
        velocity: 0,
        conversionType: false,
    });

    const [result, setResult] = useState(0);

    const calculate = () => {
        const { speed, velocity, conversionType } = fields;
        if (conversionType) {
            // Assuming speed is in miles per hour (mph)
            const calculatedVelocity = speed * 1.466;
            setResult(calculatedVelocity);
        } else {
            // Assuming velocity is in feet per second (fps)
            const calculatedSpeed = velocity / 1.466;
            setResult(calculatedSpeed);
        }
    };

    const handleValueChange = (fieldName, newValue) => {
        if (fieldName === "conversionType") {
            result && setResult(0);
        }
        setFields({ ...fields, [fieldName]: newValue });
    };

    const getNumericFields = (fieldDescriptions) => {
        return Object.keys(fieldDescriptions).map(fieldName => (
            <NumericField
                key={fieldName}
                description={fieldDescriptions[fieldName].description}
                value={fields[fieldName]}
                onChange={(newValue) => handleValueChange(fieldName, newValue)}
                placeholderText={fieldDescriptions[fieldName].placeholderText}
            />
        ));
    };

    const toggleFields = Object.keys(toggleFieldDescriptions).map(fieldName => (
        <ToggleField
            key={fieldName}
            description={toggleFieldDescriptions[fieldName]}
            value={fields[fieldName]}
            onChange={(newValue) => handleValueChange(fieldName, newValue)}
        />
    ));

    const numericFields = fields.conversionType ? getNumericFields(velFieldDescriptions) : getNumericFields(speedFieldDescriptions);

    return (
        <div className={"flex flex-col items-center"}>
            <Formula
                formulaName={"Speed and Velocity Converter"}
                toggleFields={toggleFields}
                numericFields={numericFields}
                onCalculate={calculate}
            />
            {result !== 0 && (
                <p>{fields.conversionType ? "Velocity" : "Speed"}: {round(result)} {fields.conversionType ? 'mps' : 'mph'}</p>
            )}
        </div>
    );
}

export default SpeedAndVelocityConverter;