function TypingScreen() { const [showTimer, setShowTimer] = React.useState(true); const [showWPM, setShowWPM] = React.useState(true); const [showControls, setShowControls] = React.useState(true); const [wpm, setWPM] = React.useState(null); const [text, setText] = React.useState(""); const [intervalId, setIntervalId] = React.useState(null); const [startTime, setStartTime] = React.useState(null); const [isPaused, setIsPaused] = React.useState(false); const defaultSessions = [ 5, 10, 15, 30, 60 ]; const startSession = (length)=>{ if (!length) return; const timer = setInterval(()=>{ setWPM((prevWPM)=>prevWPM + 1); }, 1000); setIntervalId(timer); setStartTime(Date.now()); }; const pauseSession = ()=>{ clearInterval(intervalId); setIsPaused(true); }; const resumeSession = ()=>{ const timer = setInterval(()=>{ setWPM((prevWPM)=>prevWPM + 1); }, 1000); setIntervalId(timer); setIsPaused(false); }; const restartSession = ()=>{ clearInterval(intervalId); setText(""); setStartTime(Date.now()); setIsPaused(false); setWPM(0); startSession(); }; React.useEffect(()=>{ if (text) { const endTime = Date.now(); fetch('/api/word-per-minute-calculator').then((response)=>response.json()).then((data)=>setWPM(data.wordsPerMinute)); } }, [ text ]); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 text-gray-800 p-4 font-roboto", __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative bg-white w-[210mm] h-[297mm] border-2 border-gray-300 p-4", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: text, onChange: (e)=>setText(e.target.value), className: "w-full h-full resize-none focus:outline-none", placeholder: "Start typing here...", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this })), showTimer && /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 left-4", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(TypingSessionTimer, { defaultSessions: defaultSessions, startSession: startSession, __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this })), showWPM && /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 right-4 p-2 bg-white border rounded shadow", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, wpm, " WPM")), showControls && /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-4 right-4 p-2 bg-white border rounded shadow flex space-x-2", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: pauseSession, className: "bg-yellow-500 text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, "Pause"), /*#__PURE__*/ React.createElement("button", { onClick: resumeSession, className: "bg-green-500 text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, "Resume"), /*#__PURE__*/ React.createElement("button", { onClick: restartSession, className: "bg-red-500 text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, "Restart")), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-4 left-4 flex space-x-2", __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowTimer(!showTimer), className: "bg-gray-500 text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, "Toggle Timer"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowWPM(!showWPM), className: "bg-gray-500 text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, "Toggle WPM"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowControls(!showControls), className: "bg-gray-500 text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, "Toggle Controls"))); } function TypingScreenStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 95, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TypingScreen, { __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this })); } function TypingSessionTimer({ defaultSessions, startSession }) { const [customLength, setCustomLength] = React.useState(""); const [sessionType, setSessionType] = React.useState("default"); const handleSessionChange = (e)=>{ setSessionType(e.target.value); }; const handleCustomChange = (e)=>{ setCustomLength(e.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-white text-gray-800 p-4", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xs", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, "Select Session Length"), /*#__PURE__*/ React.createElement("select", { name: "sessionType", className: "block w-full mt-1 bg-white text-gray-700 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none sm:text-sm", value: sessionType, onChange: handleSessionChange, __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "default", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, "Default Sessions"), /*#__PURE__*/ React.createElement("option", { value: "custom", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "Custom Session")), sessionType === "custom" && /*#__PURE__*/ React.createElement("input", { type: "text", name: "customLength", className: "block w-full mt-2 bg-white text-gray-700 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none sm:text-sm", placeholder: "Enter custom session length in minutes", value: customLength, onChange: handleCustomChange, __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }), sessionType === "default" && /*#__PURE__*/ React.createElement("select", { name: "defaultSessions", className: "block w-full mt-2 bg-white text-gray-700 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none sm:text-sm", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, defaultSessions.map((session, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: session, __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, session, " minutes"))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>startSession(sessionType === "custom" ? customLength : undefined), className: "mt-4 w-full bg-blue-500 text-white py-2 px-4 rounded shadow-sm hover:bg-blue-600 focus:outline-none sm:text-sm", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, "Start Session"))); } function TypingSessionTimerStory() { const defaultSessions = [ 5, 10, 15, 30, 60 ]; const startSession = (length)=>{ console.log(`Starting session of ${length} minutes`); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 65, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TypingSessionTimer, { defaultSessions: defaultSessions, startSession: startSession, __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this })); } function MainComponent({ defaultSessions, startSession }) { const [customLength, setCustomLength] = React.useState(""); const [sessionType, setSessionType] = React.useState("default"); const [selectedSession, setSelectedSession] = React.useState(defaultSessions[0]); const handleSessionChange = (e)=>{ setSessionType(e.target.value); }; const handleCustomChange = (e)=>{ setCustomLength(e.target.value); }; const handleSelectedSessionChange = (e)=>{ setSelectedSession(e.target.value); }; const startSessionHandler = ()=>{ const length = sessionType === "custom" ? customLength : selectedSession; startSession(length); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-white text-gray-800 p-4", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xs", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, "Select Session Length"), /*#__PURE__*/ React.createElement("select", { name: "sessionType", className: "block w-full mt-1 bg-white text-gray-700 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none sm:text-sm", value: sessionType, onChange: handleSessionChange, __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "default", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Default Sessions"), /*#__PURE__*/ React.createElement("option", { value: "custom", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "Custom Session")), sessionType === "custom" && /*#__PURE__*/ React.createElement("input", { type: "text", name: "customLength", className: "block w-full mt-2 bg-white text-gray-700 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none sm:text-sm", placeholder: "Enter custom session length in minutes", value: customLength, onChange: handleCustomChange, __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }), sessionType === "default" && /*#__PURE__*/ React.createElement("select", { name: "defaultSessions", className: "block w-full mt-2 bg-white text-gray-700 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none sm:text-sm", value: selectedSession, onChange: handleSelectedSessionChange, __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, defaultSessions.map((session, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: session, __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, session, " minutes"))), /*#__PURE__*/ React.createElement("button", { onClick: startSessionHandler, className: "mt-4 w-full bg-blue-500 text-white py-2 px-4 rounded shadow-sm hover:bg-blue-600 focus:outline-none sm:text-sm", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "Start Session"))); } function StoryComponent() { const defaultSessions = [ 5, 10, 15, 30, 60 ]; const startSession = (length)=>{ console.log(`Starting session of ${length} minutes`); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 77, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { defaultSessions: defaultSessions, startSession: startSession, __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this })); }