104 lines
3.5 KiB
JavaScript
104 lines
3.5 KiB
JavaScript
import { Download, Upload, Eye, RotateCcw, FileJson } from 'lucide-react';
|
|
import { useRef, useState } from 'react';
|
|
|
|
export default function ExportButton({ onExport, onImport, onReset }) {
|
|
const fileInputRef = useRef(null);
|
|
const [showInstructions, setShowInstructions] = useState(false);
|
|
|
|
const handleImport = (e) => {
|
|
const file = e.target.files[0];
|
|
if (!file) return;
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = (event) => {
|
|
const result = onImport(event.target.result);
|
|
if (result.success) {
|
|
alert('Import erfolgreich!');
|
|
} else {
|
|
alert(`Import fehlgeschlagen: ${result.error}`);
|
|
}
|
|
};
|
|
reader.readAsText(file);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="flex flex-wrap gap-3">
|
|
<button
|
|
onClick={() => {
|
|
onExport();
|
|
setShowInstructions(true);
|
|
}}
|
|
className="flex items-center gap-2 px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
|
|
>
|
|
<Download size={18} />
|
|
JSON Export
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => fileInputRef.current?.click()}
|
|
className="flex items-center gap-2 px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors"
|
|
>
|
|
<Upload size={18} />
|
|
JSON Import
|
|
</button>
|
|
|
|
<a
|
|
href="/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex items-center gap-2 px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors"
|
|
>
|
|
<Eye size={18} />
|
|
Vorschau
|
|
</a>
|
|
|
|
{onReset && (
|
|
<button
|
|
onClick={() => {
|
|
if (confirm('Alle Änderungen zurücksetzen?')) {
|
|
onReset();
|
|
}
|
|
}}
|
|
className="flex items-center gap-2 px-4 py-2 bg-red-50 text-red-600 rounded-lg hover:bg-red-100 transition-colors"
|
|
>
|
|
<RotateCcw size={18} />
|
|
Zurücksetzen
|
|
</button>
|
|
)}
|
|
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
accept=".json"
|
|
onChange={handleImport}
|
|
className="hidden"
|
|
/>
|
|
</div>
|
|
|
|
{showInstructions && (
|
|
<div className="p-4 bg-amber-50 border border-amber-200 rounded-lg">
|
|
<div className="flex items-start gap-3">
|
|
<FileJson className="text-amber-600 flex-shrink-0" size={20} />
|
|
<div>
|
|
<h3 className="font-medium text-amber-800 mb-2">Deployment Instructions</h3>
|
|
<ol className="text-sm text-amber-700 space-y-1 list-decimal list-inside">
|
|
<li>JSON Datei wurde heruntergeladen</li>
|
|
<li>Inhalt der <code className="bg-amber-100 px-1 rounded">cv.json</code> kopieren</li>
|
|
<li>In <code className="bg-amber-100 px-1 rounded">src/data/cv.js</code> einfügen</li>
|
|
<li>Committen und pushen: <code className="bg-amber-100 px-1 rounded">git add . && git commit -m "update cv" && git push</code></li>
|
|
<li>GitHub Actions deployt automatisch</li>
|
|
</ol>
|
|
<button
|
|
onClick={() => setShowInstructions(false)}
|
|
className="mt-3 text-sm text-amber-600 hover:text-amber-800"
|
|
>
|
|
Schließen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
} |