function ProgressBar({ progress = 0, label = "進捗" }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-2", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm font-inter", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, label), /*#__PURE__*/ React.createElement("span", { className: "text-sm font-inter", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, progress, "%")), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2.5", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-600 h-2.5 rounded-full transition-all duration-300 ease-in-out", style: { width: `${progress}%` }, __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }))); } function ProgressBarStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ProgressBar, { progress: 0, label: "未開始", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ProgressBar, { progress: 25, label: "作業中", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ProgressBar, { progress: 50, label: "半分完了", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ProgressBar, { progress: 75, label: "もう少し", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ProgressBar, { progress: 100, label: "完了", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this })); } function TaskTimer({ initialTime = 0 }) { const [time, setTime] = useState(initialTime); const [isRunning, setIsRunning] = useState(false); const intervalRef = useRef(null); const startTimer = ()=>{ if (!isRunning) { setIsRunning(true); intervalRef.current = setInterval(()=>{ setTime((prev)=>prev + 1); }, 1000); } }; const pauseTimer = ()=>{ clearInterval(intervalRef.current); setIsRunning(false); }; const resetTimer = ()=>{ clearInterval(intervalRef.current); setIsRunning(false); setTime(initialTime); }; useEffect(()=>{ return ()=>clearInterval(intervalRef.current); }, []); const formatTime = (seconds)=>{ const minutes = Math.floor(seconds / 60); const remainingSeconds = seconds % 60; return `${String(minutes).padStart(2, "0")}:${String(remainingSeconds).padStart(2, "0")}`; }; return /*#__PURE__*/ React.createElement("div", { className: "inline-block p-4 rounded-lg bg-white shadow-md", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl font-roboto mb-4 text-center", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, formatTime(time)), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: startTimer, disabled: isRunning, className: `px-4 py-2 rounded-md font-roboto ${isRunning ? "bg-gray-200 cursor-not-allowed" : "bg-green-500 hover:bg-green-600 text-white"}`, __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "開始"), /*#__PURE__*/ React.createElement("button", { onClick: pauseTimer, disabled: !isRunning, className: `px-4 py-2 rounded-md font-roboto ${!isRunning ? "bg-gray-200 cursor-not-allowed" : "bg-yellow-500 hover:bg-yellow-600 text-white"}`, __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, "一時停止"), /*#__PURE__*/ React.createElement("button", { onClick: resetTimer, className: "px-4 py-2 rounded-md bg-red-500 hover:bg-red-600 text-white font-roboto", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, "リセット"))); } function TaskTimerStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-100 min-h-screen", __source: { fileName: "", lineNumber: 69, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto mb-2", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, "デフォルトタイマー"), /*#__PURE__*/ React.createElement(TaskTimer, { __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto mb-2", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, "30秒からスタートするタイマー"), /*#__PURE__*/ React.createElement(TaskTimer, { initialTime: 30, __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }))); } function TaskCard({ title, description, isCompleted, onToggle }) { return /*#__PURE__*/ React.createElement("div", { className: "p-4 border rounded-lg shadow-md bg-white max-w-sm", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: isCompleted, onChange: onToggle, className: "w-5 h-5 accent-blue-600", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-lg font-semibold mb-1", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-600 text-sm", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, description)))); } function TaskCardStory() { const [isTask1Done, setIsTask1Done] = useState(false); const [isTask2Done, setIsTask2Done] = useState(true); return /*#__PURE__*/ React.createElement("div", { className: "space-y-4 p-4", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TaskCard, { title: "JavaScriptの基礎を学ぶ", description: "変数、関数、配列の基本的な使い方を理解する", isCompleted: isTask1Done, onToggle: ()=>setIsTask1Done(!isTask1Done), __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(TaskCard, { title: "Reactのコンポーネントを作成", description: "プロップスとステートの概念を実践的に学ぶ", isCompleted: isTask2Done, onToggle: ()=>setIsTask2Done(!isTask2Done), __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this })); } function MainComponent() { const [tasks] = useState([ { id: 1, title: "数学の宿題", completed: false }, { id: 2, title: "英語のリーディング", completed: true }, { id: 3, title: "理科のレポート", completed: false } ]); const [currentMessage] = useState([ "一歩一歩前進しましょう！", "継続は力なり！", "今日もがんばりましょう！", "小さな進歩が大きな成果につながります！" ][Math.floor(Math.random() * 4)]); const completedTasks = tasks.filter((task)=>task.completed).length; const progress = completedTasks / tasks.length * 100; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-blue-50 to-white p-6 font-sans", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto space-y-8", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-center", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-blue-800 mb-2", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "こんにちは！👋"), /*#__PURE__*/ React.createElement("p", { className: "text-blue-600", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, currentMessage)), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg p-6", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-gray-800 mb-4", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "今日のタスク"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, tasks.map((task)=>/*#__PURE__*/ React.createElement(React.Fragment, null)))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg p-6", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-gray-800 mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "進捗状況"), /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement("p", { className: "text-center mt-2 text-gray-600", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "完了タスク: ", completedTasks, "/", tasks.length)), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg p-6", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-gray-800 mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "学習タイマー"), /*#__PURE__*/ React.createElement(React.Fragment, null)))); }