43 lines
1.4 KiB
JavaScript
43 lines
1.4 KiB
JavaScript
|
import React, { useState } from "react";
|
||
|
|
// import { SubmitButton } from "./submitButton";
|
||
|
|
|
||
|
|
export function ComparisonActuator({ dataProps, onSubmit }) {
|
||
|
|
const [inputValue, setInputValue] = useState([]);
|
||
|
|
const onChangeInputEvent = (event) => setInputValue(event.target.value);
|
||
|
|
const onClickSubmitEvent = (event) => {
|
||
|
|
console.log(event.target.value);
|
||
|
|
onSubmit({ listOfElements: dataProps.listOfElements, inputValue });
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<div className="flex m-auto w-72">
|
||
|
|
<div className="block m-auto text-center">
|
||
|
|
<br />
|
||
|
|
<label>
|
||
|
|
{`... is `}
|
||
|
|
<br />
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
className="text-center text-blueGray-600 bg-white rounded text-lg border-0 shadow outline-none focus:outline-none focus:ring w-8/12 h-10 m-2"
|
||
|
|
value={inputValue}
|
||
|
|
onChange={onChangeInputEvent}
|
||
|
|
/>
|
||
|
|
<br />
|
||
|
|
{`times as valuable as ...`}
|
||
|
|
</label>
|
||
|
|
<br />
|
||
|
|
|
||
|
|
<button
|
||
|
|
className={
|
||
|
|
!true
|
||
|
|
? "bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded mt-5"
|
||
|
|
: "bg-transparent text-blue-700 font-semibold py-2 px-4 border border-blue-500 rounded mt-5"
|
||
|
|
}
|
||
|
|
onClick={onClickSubmitEvent}
|
||
|
|
>
|
||
|
|
Submit
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|