78 lines
2.8 KiB
TypeScript
78 lines
2.8 KiB
TypeScript
"use client";
|
|
import { useRef, useEffect, useState } from "react";
|
|
|
|
export const FirstPath = () => {
|
|
const modalRef = useRef<HTMLDialogElement>(null);
|
|
const [selected, setSelected] = useState<"disponent" | "pilot" | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (modalRef.current && !modalRef.current.open) {
|
|
modalRef.current.showModal();
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<dialog ref={modalRef} className="modal">
|
|
<div className="modal-box w-11/12 max-w-5xl">
|
|
<h3 className="flex items-center gap-2 text-lg font-bold mb-10">Wähle deinen Einstieg!</h3>
|
|
<p className="mb-8 text-base text-base-content/80 text-center">
|
|
Willkommen bei Virtual Air Rescue!
|
|
<br /> Wähle deinen ersten Pfad aus. Du kannst später jederzeit auch den anderen Pfad
|
|
ausprobieren, wenn du möchtest.
|
|
</p>
|
|
<div className="flex flex-col items-center justify-center m-20">
|
|
<div className="flex gap-6">
|
|
{/* Disponent Card */}
|
|
<div
|
|
className={`cursor-pointer border rounded-lg p-6 w-80 transition-colors ${
|
|
selected === "disponent" ? "border-info ring-2 ring-info" : "border-base-300"
|
|
}`}
|
|
onClick={() => setSelected("disponent")}
|
|
role="button"
|
|
tabIndex={0}
|
|
aria-pressed={selected === "disponent"}
|
|
>
|
|
<div className="font-semibold text-lg mb-2">Disponent</div>
|
|
<div className="text-sm text-base-content/70">
|
|
Denkt sich realistische Einsatzszenarien aus, koordiniert deren Ablauf und ist die
|
|
zentrale Schnittstelle zwischen Piloten und bodengebundenen Rettungsmitteln. Er
|
|
trägt die Verantwortung für einen reibungslosen Ablauf und der erfolgreichen
|
|
Durchführung der Einsätze.
|
|
<div className="badge badge-sm badge-secondary mt-3">
|
|
Teilnahme an Einführungsevent Nötig
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* Pilot Card */}
|
|
<div
|
|
className={`cursor-pointer border rounded-lg p-6 w-80 transition-colors ${
|
|
selected === "pilot" ? "border-info ring-2 ring-info" : "border-base-300"
|
|
}`}
|
|
onClick={() => setSelected("pilot")}
|
|
role="button"
|
|
tabIndex={0}
|
|
aria-pressed={selected === "pilot"}
|
|
>
|
|
<div className="font-semibold text-lg mb-2">Pilot</div>
|
|
<div className="text-sm text-base-content/70">
|
|
Fliegt die vom Disponenten erstellten Einsätze und transportiert die Med-Crew sicher
|
|
zum Einsatzort. Er übernimmt die navigatorische Vorbereitung, achtet auf
|
|
Wetterentwicklungen und sorgt für die Sicherheit seiner Crew im Flug.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="modal-action">
|
|
<button
|
|
className="btn btn-info"
|
|
disabled={!selected}
|
|
onClick={() => modalRef.current?.close()}
|
|
>
|
|
Auswahl Bestätigen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</dialog>
|
|
);
|
|
};
|