56 lines
1.3 KiB
Plaintext
56 lines
1.3 KiB
Plaintext
import { useState } from 'react'
|
|
|
|
function FandStattVer({ left, right, onNext, isCompleted }) {
|
|
const [auswahl, setAuswahl] = useState('')
|
|
|
|
const handleOK = () => {
|
|
if (auswahl) {
|
|
// Rufe onNext mit der Auswahl ('ja' oder 'nein') auf
|
|
onNext(auswahl)
|
|
} else {
|
|
alert('Bitte eine Option auswählen')
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className={`component-box ${isCompleted ? 'completed' : ''}`}>
|
|
<h3>Fand die Veranstaltung statt?</h3>
|
|
|
|
<div className="radio-group">
|
|
<label>
|
|
<input
|
|
type="radio"
|
|
name="fandstatt"
|
|
value={left}
|
|
checked={auswahl === left}
|
|
onChange={(e) => setAuswahl(e.target.value)}
|
|
disabled={isCompleted}
|
|
/>
|
|
{left}
|
|
</label>
|
|
|
|
<label>
|
|
<input
|
|
type="radio"
|
|
name="fandstatt"
|
|
value={right}
|
|
checked={auswahl === right}
|
|
onChange={(e) => setAuswahl(e.target.value)}
|
|
disabled={isCompleted}
|
|
/>
|
|
{right}
|
|
</label>
|
|
</div>
|
|
|
|
{!isCompleted && (
|
|
<button onClick={handleOK} disabled={!auswahl}>
|
|
OK
|
|
</button>
|
|
)}
|
|
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default FandStattVer
|