function MainComponent() { const [formData, setFormData] = useState({ companyName: "", testTitle: "", description: "", compensation: "", duration: "", requirements: "", testUrl: "", screenRecording: true, audioRecording: true }); const [generatedLink, setGeneratedLink] = useState(""); const [showLinkSection, setShowLinkSection] = useState(false); const [audioStream, setAudioStream] = useState(null); const [audioData, setAudioData] = useState([]); const [mediaRecorder, setMediaRecorder] = useState(null); const startRecording = async ()=>{ try { const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); const recorder = new MediaRecorder(stream); const chunks = []; recorder.ondataavailable = (e)=>chunks.push(e.data); recorder.onstop = ()=>{ const blob = new Blob(chunks, { type: "audio/webm" }); setAudioData([ ...audioData, blob ]); }; setAudioStream(stream); setMediaRecorder(recorder); recorder.start(); } catch (err) { console.error("Fejl ved optagelse:", err); } }; const stopRecording = ()=>{ if (mediaRecorder && mediaRecorder.state === "recording") { mediaRecorder.stop(); audioStream.getTracks().forEach((track)=>track.stop()); } }; const handleSubmit = (e)=>{ e.preventDefault(); const testId = Math.random().toString(36).substr(2, 9); const link = `${window.location.origin}/test/${testId}`; setGeneratedLink(link); setShowLinkSection(true); }; const handleChange = (e)=>{ setFormData({ ...formData, [e.target.name]: e.target.value }); }; const copyToClipboard = ()=>{ navigator.clipboard.writeText(generatedLink); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 p-4 md:p-8", __source: { fileName: "", lineNumber: 64, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8 text-center", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl md:text-4xl font-bold text-gray-800 font-roboto mb-4", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, "Think-Aloud Test Platform"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "Find testdeltagere til dine brugerundersøgelser")), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-6 md:p-8", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto font-semibold mb-6 text-gray-800", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, "Opret ny test"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-2", __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, "Virksomhedsnavn"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "companyName", className: "w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500", value: formData.companyName, onChange: handleChange, __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-2", __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, "Test titel"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "testTitle", className: "w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500", value: formData.testTitle, onChange: handleChange, __source: { fileName: "", lineNumber: 97, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-2", __source: { fileName: "", lineNumber: 106, columnNumber: 15 }, __self: this }, "URL til test"), /*#__PURE__*/ React.createElement("input", { type: "url", name: "testUrl", placeholder: "https://example.com", className: "w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500", value: formData.testUrl, onChange: handleChange, __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 118, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-2", __source: { fileName: "", lineNumber: 119, columnNumber: 15 }, __self: this }, "Beskrivelse af testen"), /*#__PURE__*/ React.createElement("textarea", { name: "description", rows: "4", className: "w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500", value: formData.description, onChange: handleChange, __source: { fileName: "", lineNumber: 122, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 131, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-2", __source: { fileName: "", lineNumber: 132, columnNumber: 15 }, __self: this }, "Lydoptagelse"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 p-3 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 135, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-microphone text-gray-500", __source: { fileName: "", lineNumber: 136, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 137, columnNumber: 17 }, __self: this }, "Lydoptagelse vil starte automatisk når testen begynder"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 143, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-2", __source: { fileName: "", lineNumber: 144, columnNumber: 15 }, __self: this }, "Skærmoptagelse"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 p-3 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 147, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-video text-gray-500", __source: { fileName: "", lineNumber: 148, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 149, columnNumber: 17 }, __self: this }, "Skærmoptagelse vil starte automatisk når testen begynder"))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 154, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 155, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-2", __source: { fileName: "", lineNumber: 156, columnNumber: 17 }, __self: this }, "Kompensation (DKK)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "compensation", className: "w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500", value: formData.compensation, onChange: handleChange, __source: { fileName: "", lineNumber: 159, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 168, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-2", __source: { fileName: "", lineNumber: 169, columnNumber: 17 }, __self: this }, "Varighed (minutter)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "duration", className: "w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500", value: formData.duration, onChange: handleChange, __source: { fileName: "", lineNumber: 172, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 182, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-2", __source: { fileName: "", lineNumber: 183, columnNumber: 15 }, __self: this }, "Krav til testdeltagere"), /*#__PURE__*/ React.createElement("textarea", { name: "requirements", rows: "3", className: "w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500", value: formData.requirements, onChange: handleChange, __source: { fileName: "", lineNumber: 186, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-600 text-white font-roboto py-3 px-6 rounded-md hover:bg-blue-700 transition duration-200", __source: { fileName: "", lineNumber: 194, columnNumber: 13 }, __self: this }, "Opret test")), showLinkSection && /*#__PURE__*/ React.createElement("div", { className: "mt-8 p-4 bg-gray-50 rounded-lg", __source: { fileName: "", lineNumber: 203, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-roboto font-semibold mb-4", __source: { fileName: "", lineNumber: 204, columnNumber: 15 }, __self: this }, "Del denne test"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 207, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", readOnly: true, value: generatedLink, className: "flex-1 p-3 border border-gray-300 rounded-md bg-white", __source: { fileName: "", lineNumber: 208, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: copyToClipboard, className: "bg-blue-600 text-white px-4 py-3 rounded-md hover:bg-blue-700 transition duration-200", __source: { fileName: "", lineNumber: 214, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-copy mr-2", __source: { fileName: "", lineNumber: 218, columnNumber: 19 }, __self: this }), "Kopiér")))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 bg-white rounded-lg shadow-lg p-6 md:p-8", __source: { fileName: "", lineNumber: 226, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto font-semibold mb-6 text-gray-800", __source: { fileName: "", lineNumber: 227, columnNumber: 11 }, __self: this }, "Aktive tests"), /*#__PURE__*/ React.createElement("div", { className: "text-gray-600 text-center font-roboto", __source: { fileName: "", lineNumber: 230, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clipboard-list text-4xl mb-4", __source: { fileName: "", lineNumber: 231, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 232, columnNumber: 13 }, __self: this }, "Ingen aktive tests i øjeblikket"))))); }