mirror of https://github.com/btahir/next-beats
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
93 lines
3.1 KiB
TypeScript
93 lines
3.1 KiB
TypeScript
import React from 'react'
|
|
import { X, RotateCcw } from 'lucide-react'
|
|
import { themes } from '@/lib/lofi-themes'
|
|
|
|
interface SettingsModalProps {
|
|
isOpen: boolean
|
|
onClose: () => void
|
|
currentTheme: string
|
|
setCurrentTheme: (themeId: string) => void
|
|
onResetDefaults: () => void
|
|
}
|
|
|
|
const SettingsModal: React.FC<SettingsModalProps> = ({
|
|
isOpen,
|
|
onClose,
|
|
currentTheme,
|
|
setCurrentTheme,
|
|
onResetDefaults,
|
|
}) => {
|
|
const handleResetDefaults = () => {
|
|
if (
|
|
window.confirm(
|
|
'This will reset all settings to their defaults. Continue?'
|
|
)
|
|
) {
|
|
localStorage.removeItem('lofi-volume')
|
|
localStorage.removeItem('lofi-theme')
|
|
localStorage.removeItem('lofi-effects-volume')
|
|
localStorage.removeItem('lofi-effect-volumes')
|
|
localStorage.removeItem('customChannels')
|
|
localStorage.removeItem('hiddenDefaultChannels')
|
|
localStorage.removeItem('customSoundEffects')
|
|
|
|
window.location.reload()
|
|
}
|
|
}
|
|
|
|
if (!isOpen) return null
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
|
|
<div className="w-full max-w-md rounded-[var(--lofi-card-radius)] bg-[var(--lofi-card)] p-6 shadow-[var(--lofi-card-shadow)]">
|
|
<div className="mb-6 flex items-center justify-between">
|
|
<h3 className="text-lg font-bold text-[var(--lofi-text-primary)]">
|
|
Settings
|
|
</h3>
|
|
<button
|
|
onClick={onClose}
|
|
className="rounded-[var(--lofi-button-radius)] p-2 text-[var(--lofi-text-secondary)] hover:bg-[var(--lofi-card-hover)]"
|
|
>
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<div className="space-y-3">
|
|
<label
|
|
htmlFor="theme-select"
|
|
className="block text-sm font-medium text-[var(--lofi-text-primary)]"
|
|
>
|
|
Theme
|
|
</label>
|
|
<select
|
|
id="theme-select"
|
|
value={currentTheme}
|
|
onChange={(e) => setCurrentTheme(e.target.value)}
|
|
className="w-full rounded-[var(--lofi-button-radius)] border border-[var(--lofi-border)] bg-[var(--lofi-card-hover)] px-3 py-2 text-[var(--lofi-text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--lofi-accent)]"
|
|
>
|
|
{Object.values(themes).map((theme) => (
|
|
<option key={theme.id} value={theme.id}>
|
|
{theme.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div className="pt-4">
|
|
<button
|
|
onClick={handleResetDefaults}
|
|
className="flex w-full items-center justify-center space-x-2 rounded-[var(--lofi-button-radius)] bg-[var(--lofi-button-bg)] py-2 text-[var(--lofi-button-text)] shadow-[var(--lofi-card-shadow)] transition-colors hover:bg-[var(--lofi-button-hover)]"
|
|
>
|
|
<RotateCcw size={16} />
|
|
<span>Restore Defaults</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default SettingsModal
|