66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
import { useState } from 'react'
|
||
import { getStorageMode, setStorageMode, type StorageMode } from '../db'
|
||
|
||
export function StorageConfig() {
|
||
const [currentMode, setCurrentMode] = useState<StorageMode>(getStorageMode())
|
||
const [showConfig, setShowConfig] = useState(false)
|
||
|
||
const handleModeChange = (mode: StorageMode) => {
|
||
setStorageMode(mode)
|
||
setCurrentMode(mode)
|
||
window.location.reload()
|
||
}
|
||
|
||
if (!showConfig) {
|
||
return (
|
||
<button
|
||
onClick={() => setShowConfig(true)}
|
||
className="fixed bottom-4 right-4 bg-gray-200 hover:bg-gray-300 px-3 py-2 rounded text-sm"
|
||
>
|
||
⚙️ Storage
|
||
</button>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="fixed bottom-4 right-4 bg-white border rounded-lg shadow-lg p-4 min-w-64">
|
||
<div className="flex justify-between items-center mb-3">
|
||
<h3 className="font-medium">Storage Mode</h3>
|
||
<button
|
||
onClick={() => setShowConfig(false)}
|
||
className="text-gray-500 hover:text-gray-700"
|
||
>
|
||
✕
|
||
</button>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<label className="flex items-center space-x-2">
|
||
<input
|
||
type="radio"
|
||
name="storage-mode"
|
||
value="indexeddb"
|
||
checked={currentMode === 'indexeddb'}
|
||
onChange={() => handleModeChange('indexeddb')}
|
||
/>
|
||
<span>IndexedDB (Local)</span>
|
||
</label>
|
||
|
||
<label className="flex items-center space-x-2">
|
||
<input
|
||
type="radio"
|
||
name="storage-mode"
|
||
value="database"
|
||
checked={currentMode === 'database'}
|
||
onChange={() => handleModeChange('database')}
|
||
/>
|
||
<span>Database (Collaborative)</span>
|
||
</label>
|
||
</div>
|
||
|
||
<div className="mt-3 text-xs text-gray-600">
|
||
Current: {currentMode === 'indexeddb' ? 'Local storage' : 'Remote database'}
|
||
</div>
|
||
</div>
|
||
)
|
||
} |