mirror of
https://github.com/tiennm99/ai-coding-workflow-labs.git
synced 2026-09-10 20:19:48 +00:00
tiennm99
51a4b90163
Convert all 41 TypeScript source/config files in cc4e-course/quiz-project (Next.js), gstack (Astro), and superpowers (Vite/React/Phaser) to plain JavaScript with JSDoc type annotations, replacing tsconfig.json with jsconfig.json (strict + checkJs) in each subproject. No behavior changes: lint, typecheck, test, and build gates match their TypeScript baselines exactly in all three subprojects. Update stack references in the affected READMEs accordingly.
70 lines
1.9 KiB
React
70 lines
1.9 KiB
React
/** @typedef {import("../types").Difficulty} Difficulty */
|
||
|
||
/**
|
||
* @typedef {Object} DifficultySelectProps
|
||
* @property {(difficulty: Difficulty) => void} onSelect
|
||
* @property {() => void} onBack
|
||
*/
|
||
|
||
/** @type {{ key: Difficulty; label: string; desc: string }[]} */
|
||
const difficulties = [
|
||
{ key: "easy", label: "Easy", desc: "6×4 grid • 5 min • 5 hints" },
|
||
{ key: "medium", label: "Medium", desc: "8×6 grid • 4 min • 3 hints" },
|
||
{ key: "hard", label: "Hard", desc: "10×8 grid • 3 min • 1 hint" },
|
||
];
|
||
|
||
/**
|
||
* @param {DifficultySelectProps} props
|
||
* @returns {import("react").JSX.Element}
|
||
*/
|
||
export function DifficultySelect({ onSelect, onBack }) {
|
||
return (
|
||
<div style={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
alignItems: "center",
|
||
gap: "20px",
|
||
}}>
|
||
<h2 style={{ fontSize: "32px" }}>Select Difficulty</h2>
|
||
<div style={{ display: "flex", gap: "16px" }}>
|
||
{difficulties.map((d) => (
|
||
<button
|
||
key={d.key}
|
||
onClick={() => onSelect(d.key)}
|
||
style={{
|
||
padding: "20px 32px",
|
||
fontSize: "18px",
|
||
background: "#0f3460",
|
||
color: "#fff",
|
||
border: "2px solid #e94560",
|
||
borderRadius: "8px",
|
||
cursor: "pointer",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
alignItems: "center",
|
||
gap: "8px",
|
||
}}
|
||
>
|
||
<strong>{d.label}</strong>
|
||
<span style={{ fontSize: "12px", color: "#aaa" }}>{d.desc}</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
<button
|
||
onClick={onBack}
|
||
style={{
|
||
padding: "8px 24px",
|
||
fontSize: "16px",
|
||
background: "transparent",
|
||
color: "#aaa",
|
||
border: "1px solid #aaa",
|
||
borderRadius: "4px",
|
||
cursor: "pointer",
|
||
}}
|
||
>
|
||
Back
|
||
</button>
|
||
</div>
|
||
);
|
||
}
|