113 lines
4.0 KiB
React
113 lines
4.0 KiB
React
|
import { useApp } from "../context/AppContext.jsx";
|
|||
|
|
|
|||
|
|
const TEAL = "linear-gradient(135deg, #7c3aed, #a855f7)";
|
|||
|
|
|
|||
|
|
const BACKUP_ICON = (
|
|||
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none">
|
|||
|
|
<path d="M12 15V5M8 11l4-4 4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
|
|||
|
|
<path d="M4 17v2a1 1 0 001 1h14a1 1 0 001-1v-2" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
|
|||
|
|
</svg>
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
const RESTORE_ICON = (
|
|||
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none">
|
|||
|
|
<path d="M4 8a8 8 0 1 1 0 8" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
|
|||
|
|
<polyline points="4,4 4,8 8,8" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
|
|||
|
|
</svg>
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
function ActionRow({ icon, title, description, onClick }) {
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
onClick={onClick}
|
|||
|
|
style={{
|
|||
|
|
display: "flex", alignItems: "center", gap: 14,
|
|||
|
|
padding: "12px 0", cursor: "pointer",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<div style={{ color: "#94a3b8", flexShrink: 0 }}>{icon}</div>
|
|||
|
|
<div>
|
|||
|
|
<div style={{ fontWeight: 600, fontSize: 14, color: "inherit", marginBottom: 2 }}>{title}</div>
|
|||
|
|
<div style={{ fontSize: 12, color: "#64748b" }}>{description}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function InstellingenModal({ onClose }) {
|
|||
|
|
const { T, darkMode, setDarkMode, doBackup, doRestore } = useApp();
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
onClick={onClose}
|
|||
|
|
style={{
|
|||
|
|
position: "fixed", inset: 0, zIndex: 400,
|
|||
|
|
background: "rgba(0,0,0,0.55)", backdropFilter: "blur(4px)",
|
|||
|
|
display: "flex", alignItems: "center", justifyContent: "center",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
onClick={(e) => e.stopPropagation()}
|
|||
|
|
style={{
|
|||
|
|
background: T.card, border: `1px solid ${T.border}`,
|
|||
|
|
borderRadius: 16, padding: "22px 22px 8px",
|
|||
|
|
width: 360, boxShadow: "0 16px 48px rgba(0,0,0,0.4)",
|
|||
|
|
color: T.text,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{/* Header */}
|
|||
|
|
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 20 }}>
|
|||
|
|
<span style={{ fontWeight: 700, fontSize: 16 }}>Instellingen</span>
|
|||
|
|
<button onClick={onClose} style={{
|
|||
|
|
background: "transparent", border: "none", cursor: "pointer",
|
|||
|
|
color: T.muted, fontSize: 20, lineHeight: 1, padding: "0 4px",
|
|||
|
|
}}>×</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Dark mode rij */}
|
|||
|
|
<div style={{
|
|||
|
|
display: "flex", alignItems: "center", justifyContent: "space-between",
|
|||
|
|
padding: "4px 0 16px",
|
|||
|
|
}}>
|
|||
|
|
<span style={{ fontWeight: 600, fontSize: 14 }}>Dark mode</span>
|
|||
|
|
<div
|
|||
|
|
onClick={() => setDarkMode((d) => !d)}
|
|||
|
|
style={{
|
|||
|
|
width: 44, height: 24, borderRadius: 12, cursor: "pointer",
|
|||
|
|
background: darkMode ? TEAL : "#334155",
|
|||
|
|
position: "relative", transition: "background 0.2s", flexShrink: 0,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<div style={{
|
|||
|
|
position: "absolute", top: 3, borderRadius: "50%",
|
|||
|
|
width: 18, height: 18, background: "#fff",
|
|||
|
|
left: darkMode ? 23 : 3,
|
|||
|
|
transition: "left 0.2s",
|
|||
|
|
boxShadow: "0 1px 4px rgba(0,0,0,0.3)",
|
|||
|
|
}} />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style={{ height: 1, background: T.border, margin: "0 -22px" }} />
|
|||
|
|
|
|||
|
|
{/* Acties */}
|
|||
|
|
<div style={{ padding: "4px 0 10px" }}>
|
|||
|
|
<ActionRow
|
|||
|
|
icon={BACKUP_ICON}
|
|||
|
|
title="Backup maken"
|
|||
|
|
description="Download een volledige backup als ZIP"
|
|||
|
|
onClick={() => { doBackup(); onClose(); }}
|
|||
|
|
/>
|
|||
|
|
<div style={{ height: 1, background: T.border }} />
|
|||
|
|
<ActionRow
|
|||
|
|
icon={RESTORE_ICON}
|
|||
|
|
title="Backup herstellen"
|
|||
|
|
description="Herstel data vanuit een backup-bestand"
|
|||
|
|
onClick={() => { doRestore(); onClose(); }}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|