53 lines
1.9 KiB
TypeScript
53 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import { useSound } from '../../providers/sound-provider';
|
|
import '../../styles/ui.css';
|
|
|
|
export function SettingsPanel() {
|
|
const [theme, setTheme] = React.useState('dark');
|
|
const [sound, setSound] = React.useState(true);
|
|
const [powerMode, setPowerMode] = React.useState(false);
|
|
const { setEnabled, playSound } = useSound();
|
|
|
|
const handleSoundToggle = (value: boolean) => {
|
|
setSound(value);
|
|
setEnabled(value);
|
|
if (value) {
|
|
playSound('success');
|
|
}
|
|
};
|
|
|
|
const handleThemeChange = () => {
|
|
playSound('click');
|
|
setTheme(theme === 'dark' ? 'light' : 'dark');
|
|
};
|
|
|
|
const handlePowerMode = (value: boolean) => {
|
|
playSound(value ? 'success' : 'click');
|
|
setPowerMode(value);
|
|
};
|
|
|
|
return (
|
|
<div className="settings-panel">
|
|
<div className="settings-option">
|
|
{sound ? (
|
|
<svg className="icon" viewBox="0 0 24 24">
|
|
<path d="M3 15a1 1 0 011-1h2.83a1 1 0 00.8-.4l1.12-1.5a1 1 0 01.8-.4h3.55a1 1 0 00.8-.4l1.12-1.5a1 1 0 01.8-.4H19a1 1 0 011 1v6a1 1 0 01-1 1h-2.83a1 1 0 00-.8-.4l-1.12-1.5a1 1 0 00-.8-.4H9.72a1 1 0 01-.8-.4l-1.12-1.5a1 1 0 00-.8-.4H4a1 1 0 01-1-1v-2zM12 6a1 1 0 011-1h6a1 1 0 011 1v3"/>
|
|
</svg>
|
|
) : (
|
|
<svg className="icon" viewBox="0 0 24 24">
|
|
<path d="M3 15a1 1 0 011-1h2.83a1 1 0 00.8-.4l1.12-1.5a1 1 0 01.8-.4h3.55a1 1 0 00.8-.4l1.12-1.5a1 1 0 01.8-.4H19a1 1 0 011 1v6a1 1 0 01-1 1h-2.83a1 1 0 00-.8-.4l-1.12-1.5a1 1 0 00-.8-.4H9.72a1 1 0 01-.8-.4l-1.12-1.5a1 1 0 00-.8-.4H4a1 1 0 01-1-1v-2zM12 6a1 1 0 011-1h6a1 1 0 011 1v3M3 3l18 18"/>
|
|
</svg>
|
|
)}
|
|
<span className="option-text">Sound Effects</span>
|
|
<label className="switch">
|
|
<input
|
|
type="checkbox"
|
|
checked={sound}
|
|
onChange={(e) => handleSoundToggle(e.target.checked)}
|
|
/>
|
|
<span className="slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|