blob: b8daea02d3babf5c8dd08b536d91f03c3979934a (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
import React from 'react';
import { useTheme } from '../contexts/ThemeContext';
import { Theme } from '../types';
interface Props {
onStartGame: () => void;
categories?: string[];
selectedCategory?: string;
onSelectCategory?: (cat: string) => void;
}
const MainMenu: React.FC<Props> = ({ onStartGame, categories = [], selectedCategory = 'random', onSelectCategory }) => {
const { theme, toggleTheme } = useTheme();
return (
<div className="main-menu">
<h1>TyperPunk</h1>
<div className="menu-options">
<div style={{ marginBottom: '0.75rem' }}>
<label htmlFor="category" style={{ marginRight: 8 }}>Category:</label>
<select
id="category"
value={selectedCategory}
onChange={(e) => onSelectCategory && onSelectCategory(e.target.value)}
style={{ padding: '0.4rem 0.6rem' }}
>
<option value="random">Random</option>
{categories.map((c) => (
<option key={c} value={c}>{c}</option>
))}
</select>
</div>
<button className="menu-button" onClick={onStartGame}>
Start Typing Test
</button>
<button className="menu-button" onClick={toggleTheme}>
Toggle {theme === Theme.Dark ? 'Light' : 'Dark'} Mode
</button>
</div>
<button onClick={toggleTheme} className="theme-toggle">
{theme === Theme.Dark ? (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<circle cx="12" cy="12" r="5"/>
<line x1="12" y1="1" x2="12" y2="3"/>
<line x1="12" y1="21" x2="12" y2="23"/>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
<line x1="1" y1="12" x2="3" y2="12"/>
<line x1="21" y1="12" x2="23" y2="12"/>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
</svg>
) : (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
</svg>
)}
</button>
</div>
);
};
export default MainMenu;
|
