function MainComponent() { const [selectedTime, setSelectedTime] = useState(0); const [isRunning, setIsRunning] = useState(false); const [timeLeft, setTimeLeft] = useState(0); const [customHours, setCustomHours] = useState(""); const [customMinutes, setCustomMinutes] = useState(""); const [customSeconds, setCustomSeconds] = useState(""); const [isPaused, setIsPaused] = useState(false); const [isSidebarOpen, setSidebarOpen] = useState(true); const [showConfirm, setShowConfirm] = useState(false); const [confirmMessage, setConfirmMessage] = useState(""); const [pendingAction, setPendingAction] = useState(null); const [isStopwatch, setIsStopwatch] = useState(false); const [laps, setLaps] = useState([]); const presetTimes = [ { label: "10 seconden", value: 10 / 60 }, { label: "30 seconden", value: 30 / 60 }, { label: "45 seconden", value: 45 / 60 }, { label: "1 minuut", value: 1 }, { label: "2 minuten", value: 2 }, { label: "5 minuten", value: 5 }, { label: "10 minuten", value: 10 }, { label: "15 minuten", value: 15 }, { label: "30 minuten", value: 30 }, { label: "1 uur", value: 60 } ]; useEffect(()=>{ let timer; if (isRunning) { timer = setInterval(()=>{ if (isStopwatch) { setTimeLeft((prev)=>prev + 1); } else if (timeLeft > 0) { setTimeLeft((prev)=>prev - 1); } }, 1000); } else if (timeLeft === 0 && !isStopwatch) { setIsRunning(false); } return ()=>clearInterval(timer); }, [ isRunning, timeLeft, isStopwatch ]); const startTimer = ()=>{ const totalSeconds = parseInt(customHours || "0") * 3600 + parseInt(customMinutes || "0") * 60 + parseInt(customSeconds || "0"); if (selectedTime > 0 || totalSeconds > 0) { if (isRunning || isPaused) { const timeString = selectedTime > 0 ? presetTimes.find((t)=>t.value === selectedTime)?.label : `${customHours ? `${customHours} uur ` : ""}${customMinutes ? `${customMinutes} minuten ` : ""}${customSeconds ? `${customSeconds} seconden` : ""}`; setConfirmMessage(`Wil je de huidige timer stoppen en een nieuwe van ${timeString} starten?`); setPendingAction(()=>()=>{ setTimeLeft(selectedTime > 0 ? selectedTime * 60 : totalSeconds); setIsRunning(true); setIsPaused(false); setLaps([]); }); setShowConfirm(true); } else { setTimeLeft(selectedTime > 0 ? selectedTime * 60 : totalSeconds); setIsRunning(true); setIsPaused(false); setLaps([]); } } }; const pauseTimer = ()=>{ setIsPaused(true); setIsRunning(false); }; const resumeTimer = ()=>{ setIsPaused(false); setIsRunning(true); }; const stopTimer = ()=>{ setIsRunning(false); setIsPaused(false); setTimeLeft(0); setSelectedTime(0); setCustomHours(""); setCustomMinutes(""); setCustomSeconds(""); setLaps([]); }; const formatTime = (seconds)=>{ const hours = Math.floor(seconds / 3600); const minutes = Math.floor(seconds % 3600 / 60); const remainingSeconds = seconds % 60; if (hours > 0) { return `${hours}:${minutes.toString().padStart(2, "0")}:${remainingSeconds.toString().padStart(2, "0")}`; } return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`; }; const handleCustomHoursChange = (e)=>{ const value = e.target.value; if (!isNaN(value) && value >= 0) { setCustomHours(value); setSelectedTime(0); } }; const handleCustomMinutesChange = (e)=>{ const value = e.target.value; if (!isNaN(value) && value >= 0 && value < 60) { setCustomMinutes(value); setSelectedTime(0); } }; const handleCustomSecondsChange = (e)=>{ const value = e.target.value; if (!isNaN(value) && value >= 0 && value < 60) { setCustomSeconds(value); setSelectedTime(0); } }; const getPercentage = ()=>{ if (!isRunning && !isPaused) return 100; const totalTime = selectedTime > 0 ? selectedTime * 60 : parseInt(customHours || "0") * 3600 + parseInt(customMinutes || "0") * 60 + parseInt(customSeconds || "0"); return (totalTime - timeLeft) / totalTime * 100; }; const addLap = ()=>{ setLaps((prev)=>[ timeLeft, ...prev ]); }; const handlePresetTimeClick = (time)=>{ if (isRunning || isPaused) { setConfirmMessage(`Wil je de huidige timer stoppen en een nieuwe van ${time.label} instellen?`); setPendingAction(()=>()=>{ setSelectedTime(time.value); setTimeLeft(time.value * 60); setIsRunning(false); setIsPaused(false); setCustomHours(""); setCustomMinutes(""); setCustomSeconds(""); setIsStopwatch(false); }); setShowConfirm(true); } else { setSelectedTime(time.value); setTimeLeft(time.value * 60); setIsRunning(false); setIsPaused(false); setCustomHours(""); setCustomMinutes(""); setCustomSeconds(""); setIsStopwatch(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen font-roboto bg-[#143f31] relative", __source: { fileName: "", lineNumber: 166, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 right-8 flex items-center gap-4 z-50", __source: { fileName: "", lineNumber: 167, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://robertsdigitaledidactiek.created.app/", className: "text-2xl", __source: { fileName: "", lineNumber: 168, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-tools text-[#e0d4bc]", __source: { fileName: "", lineNumber: 172, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://www.digitaledidactiek.com", className: "text-2xl font-bold text-white", __source: { fileName: "", lineNumber: 174, columnNumber: 9 }, __self: this }, "✕")), /*#__PURE__*/ React.createElement("div", { className: `${isSidebarOpen ? "w-1/3" : "w-[60px]"} bg-[#143f31] relative transition-all duration-300 ease-in-out`, __source: { fileName: "", lineNumber: 182, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSidebarOpen(!isSidebarOpen), className: "absolute -right-4 top-4 z-10 bg-[#143f31] text-white p-2 rounded-full shadow-md", __source: { fileName: "", lineNumber: 185, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isSidebarOpen ? "fa-chevron-left" : "fa-chevron-right"}`, __source: { fileName: "", lineNumber: 189, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: `${isSidebarOpen ? "opacity-100 p-8" : "opacity-0 invisible"} transition-opacity duration-300 bg-[#143f31]`, __source: { fileName: "", lineNumber: 193, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-6 text-white", __source: { fileName: "", lineNumber: 196, columnNumber: 11 }, __self: this }, "Timer Keuzes"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 197, columnNumber: 11 }, __self: this }, presetTimes.map((time)=>/*#__PURE__*/ React.createElement("button", { key: time.value, onClick: ()=>handlePresetTimeClick(time), className: `p-4 rounded-lg ${selectedTime === time.value ? "bg-[#e3f2fd] text-black border-2 border-[#4caf50] shadow-md" : "bg-[#e0d4bc] text-black hover:bg-[#decaa2] border border-gray-200"} transition-colors`, __source: { fileName: "", lineNumber: 199, columnNumber: 15 }, __self: this }, time.label))), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-6 mt-8 text-white", __source: { fileName: "", lineNumber: 212, columnNumber: 11 }, __self: this }, "Custom Timer"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 215, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 216, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm mb-2 text-white", __source: { fileName: "", lineNumber: 217, columnNumber: 15 }, __self: this }, "Uren"), /*#__PURE__*/ React.createElement("input", { type: "number", value: customHours, onChange: handleCustomHoursChange, className: "w-full p-4 rounded-lg border border-gray-300 bg-[#e0d4bc] text-black", min: "0", __source: { fileName: "", lineNumber: 218, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 226, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm mb-2 text-white", __source: { fileName: "", lineNumber: 227, columnNumber: 15 }, __self: this }, "Minuten"), /*#__PURE__*/ React.createElement("input", { type: "number", value: customMinutes, onChange: handleCustomMinutesChange, className: "w-full p-4 rounded-lg border border-gray-300 bg-[#e0d4bc] text-black", min: "0", max: "59", __source: { fileName: "", lineNumber: 228, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 237, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm mb-2 text-white", __source: { fileName: "", lineNumber: 238, columnNumber: 15 }, __self: this }, "Seconden"), /*#__PURE__*/ React.createElement("input", { type: "number", value: customSeconds, onChange: handleCustomSecondsChange, className: "w-full p-4 rounded-lg border border-gray-300 bg-[#e0d4bc] text-black", min: "0", max: "59", __source: { fileName: "", lineNumber: 239, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4 bg-[#143f31]", __source: { fileName: "", lineNumber: 249, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setIsStopwatch(false); startTimer(); }, className: "mt-6 p-4 w-full bg-[#1d4c3e] text-white rounded-lg hover:bg-[#143f31] transition-colors", __source: { fileName: "", lineNumber: 250, columnNumber: 13 }, __self: this }, "Start Timer"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setIsStopwatch(true); setTimeLeft(0); setIsRunning(true); setIsPaused(false); setLaps([]); }, className: "p-4 w-full bg-[#decaa2] text-black rounded-lg hover:bg-[#e0d4bc] transition-colors", __source: { fileName: "", lineNumber: 259, columnNumber: 13 }, __self: this }, "Start Stopwatch"))), !isSidebarOpen && /*#__PURE__*/ React.createElement("div", { className: "h-full flex items-center justify-center", __source: { fileName: "", lineNumber: 275, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "transform -rotate-90 whitespace-nowrap text-white font-bold text-lg", __source: { fileName: "", lineNumber: 276, columnNumber: 13 }, __self: this }, "Timer Keuzes"))), /*#__PURE__*/ React.createElement("div", { className: `${isSidebarOpen ? "w-2/3" : "flex-1"} transition-all duration-300 flex items-center justify-center bg-[#1d4c3e] p-8`, __source: { fileName: "", lineNumber: 283, columnNumber: 7 }, __self: this }, (isRunning || isPaused) && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[800px] bg-[#1d4c3e]", __source: { fileName: "", lineNumber: 287, columnNumber: 11 }, __self: this }, !isStopwatch && /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-[60px] bg-[#e0d4bc] rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 289, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 h-full bg-white transition-all duration-1000", style: { width: `${getPercentage()}%` }, __source: { fileName: "", lineNumber: 290, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-6xl font-bold text-center text-white bg-[#1d4c3e]", __source: { fileName: "", lineNumber: 296, columnNumber: 13 }, __self: this }, formatTime(timeLeft)), isStopwatch && /*#__PURE__*/ React.createElement("div", { className: "bg-[#1d4c3e]", __source: { fileName: "", lineNumber: 300, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center gap-4 mt-8", __source: { fileName: "", lineNumber: 301, columnNumber: 17 }, __self: this }, isRunning && /*#__PURE__*/ React.createElement("button", { onClick: addLap, className: "p-4 bg-[#e0d4bc] text-black rounded-lg hover:bg-[#decaa2] transition-colors", __source: { fileName: "", lineNumber: 303, columnNumber: 21 }, __self: this }, "Ronde"), /*#__PURE__*/ React.createElement("button", { onClick: isPaused ? resumeTimer : pauseTimer, className: "p-4 bg-[#e0d4bc] text-black rounded-lg hover:bg-[#decaa2] transition-colors", __source: { fileName: "", lineNumber: 310, columnNumber: 19 }, __self: this }, isPaused ? "Hervat" : "Pauzeer"), /*#__PURE__*/ React.createElement("button", { onClick: stopTimer, className: "p-4 bg-[#e0d4bc] text-black rounded-lg hover:bg-[#decaa2] transition-colors", __source: { fileName: "", lineNumber: 316, columnNumber: 19 }, __self: this }, "Stop")), laps.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-8 max-h-[200px] overflow-y-auto bg-[#1d4c3e]", __source: { fileName: "", lineNumber: 324, columnNumber: 19 }, __self: this }, laps.map((lap, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex justify-between items-center p-4 bg-[#e0d4bc] rounded-lg mb-2", __source: { fileName: "", lineNumber: 326, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-black", __source: { fileName: "", lineNumber: 330, columnNumber: 25 }, __self: this }, "Ronde ", laps.length - index), /*#__PURE__*/ React.createElement("span", { className: "text-black font-mono", __source: { fileName: "", lineNumber: 333, columnNumber: 25 }, __self: this }, formatTime(lap)))))))), showConfirm && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 346, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#e0d4bc] p-6 rounded-lg shadow-lg max-w-md w-full mx-4", __source: { fileName: "", lineNumber: 347, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-black text-lg mb-6", __source: { fileName: "", lineNumber: 348, columnNumber: 13 }, __self: this }, confirmMessage), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end gap-4", __source: { fileName: "", lineNumber: 349, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setShowConfirm(false); if (pendingAction) { pendingAction(); setPendingAction(null); } }, className: "px-4 py-2 bg-[#1d4c3e] text-white rounded hover:bg-[#143f31]", __source: { fileName: "", lineNumber: 350, columnNumber: 15 }, __self: this }, "Ja"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setShowConfirm(false); setPendingAction(null); }, className: "px-4 py-2 bg-[#e0d4bc] text-black rounded hover:bg-[#decaa2]", __source: { fileName: "", lineNumber: 362, columnNumber: 15 }, __self: this }, "Nee"))))); }