File size: 3,754 Bytes
8d3471e | 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 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | import { Download, Upload } from 'lucide-react'
export default function BackupSection({
t,
importMode,
setImportMode,
importing,
onLoadExportData,
onDownloadExportFile,
onImport,
onImportFileChange,
importText,
setImportText,
exportData,
}) {
return (
<div className="bg-card border border-border rounded-xl p-5 space-y-4">
<h3 className="font-semibold">{t('settings.backupTitle')}</h3>
<div className="flex flex-wrap items-center gap-3">
<button
type="button"
onClick={onLoadExportData}
className="px-3 py-2 rounded-lg bg-secondary border border-border hover:bg-secondary/80 text-sm flex items-center gap-2"
>
<Download className="w-4 h-4" />
{t('settings.loadExport')}
</button>
<button
type="button"
onClick={onDownloadExportFile}
className="px-3 py-2 rounded-lg bg-secondary border border-border hover:bg-secondary/80 text-sm flex items-center gap-2"
>
<Download className="w-4 h-4" />
{t('settings.downloadExport')}
</button>
<label className="px-3 py-2 rounded-lg bg-secondary border border-border hover:bg-secondary/80 text-sm flex items-center gap-2 cursor-pointer">
<Upload className="w-4 h-4" />
{t('settings.chooseImportFile')}
<input
type="file"
accept=".json,application/json"
className="hidden"
onChange={(e) => {
onImportFileChange(e.target.files?.[0] || null)
e.target.value = ''
}}
/>
</label>
<select
value={importMode}
onChange={(e) => setImportMode(e.target.value)}
className="bg-background border border-border rounded-lg px-3 py-2 text-sm"
>
<option value="merge">{t('settings.importModeMerge')}</option>
<option value="replace">{t('settings.importModeReplace')}</option>
</select>
<button
type="button"
onClick={onImport}
disabled={importing}
className="px-3 py-2 rounded-lg bg-secondary border border-border hover:bg-secondary/80 text-sm flex items-center gap-2"
>
<Upload className="w-4 h-4" />
{importing ? t('settings.importing') : t('settings.importNow')}
</button>
</div>
<textarea
value={importText}
onChange={(e) => setImportText(e.target.value)}
rows={8}
className="w-full bg-background border border-border rounded-lg px-3 py-2 font-mono text-xs"
placeholder={t('settings.importPlaceholder')}
/>
{exportData && (
<div className="space-y-2">
<label className="text-sm text-muted-foreground">{t('settings.exportJson')}</label>
<textarea
value={exportData.json || ''}
readOnly
rows={6}
className="w-full bg-background border border-border rounded-lg px-3 py-2 font-mono text-xs"
/>
</div>
)}
</div>
)
}
|