97 lines
3.1 KiB
TypeScript
97 lines
3.1 KiB
TypeScript
import React from "react";
|
|
|
|
interface ManagePageProps {
|
|
isActive: boolean;
|
|
saveSheet: () => void;
|
|
loadSheet: () => void;
|
|
exportSheet: () => void;
|
|
handleImportFile: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
importFileRef: React.RefObject<HTMLInputElement | null>;
|
|
copyShareURL: () => Promise<void>;
|
|
copyStatus: boolean;
|
|
}
|
|
|
|
export default function ManagePage({
|
|
isActive,
|
|
saveSheet,
|
|
loadSheet,
|
|
exportSheet,
|
|
handleImportFile,
|
|
importFileRef,
|
|
copyShareURL,
|
|
copyStatus,
|
|
}: ManagePageProps) {
|
|
return (
|
|
<div className={`page${isActive ? " active" : ""}`} id="page-manage">
|
|
<div className="manage-grid">
|
|
<div className="section">
|
|
<div className="section-title">
|
|
<span className="icon">◈</span> Local Save
|
|
</div>
|
|
<p className="manage-desc">
|
|
Save your character sheet to your browser's local storage, or load a previously saved
|
|
sheet.
|
|
</p>
|
|
<div className="manage-btn-row">
|
|
<button type="button" className="btn-save btn-lg" onClick={saveSheet}>
|
|
✦ Save to Browser
|
|
</button>
|
|
<button type="button" className="btn-load btn-lg" onClick={loadSheet}>
|
|
↑ Load from Browser
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="section">
|
|
<div className="section-title">
|
|
<span className="icon">⊕</span> JSON File
|
|
</div>
|
|
<p className="manage-desc">
|
|
Export your character to a JSON file for backup or sharing, or import from a previously
|
|
exported file.
|
|
</p>
|
|
<div className="manage-btn-row">
|
|
<button type="button" className="btn-save btn-export btn-lg" onClick={exportSheet}>
|
|
↓ Export JSON
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="btn-load btn-import btn-lg"
|
|
onClick={() => {
|
|
if (!importFileRef.current) return;
|
|
importFileRef.current.value = "";
|
|
importFileRef.current.click();
|
|
}}
|
|
>
|
|
↑ Import JSON
|
|
</button>
|
|
<input
|
|
ref={importFileRef}
|
|
type="file"
|
|
accept=".json,application/json"
|
|
style={{ display: "none" }}
|
|
onChange={handleImportFile}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="section col-span-2">
|
|
<div className="section-title">
|
|
<span className="icon">⎘</span> Share via URL
|
|
</div>
|
|
<p className="manage-desc">
|
|
Encode your character's current state into a shareable link. Anyone who opens the link
|
|
will see your character — auto-save is disabled for viewers.
|
|
</p>
|
|
<div className="manage-btn-row">
|
|
<button type="button" className="btn-save btn-export btn-lg" onClick={copyShareURL}>
|
|
⎘ Copy URL
|
|
</button>
|
|
<span className={`save-status${copyStatus ? " show" : ""}`}>Copied!</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|