Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | 25x 501x 501x 6x 1x | import { Link } from "react-router";
import { Button, Form } from "react-bootstrap";
import { useStaffTools } from "main/utils/useStaffTools";
const toggleContainerStyle = {
display: "flex",
alignItems: "center",
gap: "16px",
} as const;
export default function Footer() {
const {
debugMode,
enableEditing,
canUseStaffTools,
setStaffTool,
newConceptHandler,
realignConceptsHandler,
} = useStaffTools();
return (
<footer
style={{
background: "#ffffff",
borderTop: "1px solid var(--border)",
}}
>
<div
style={{
width: "1126px",
maxWidth: "100%",
margin: "0 auto",
padding: "16px 20px",
color: "#475569",
fontSize: "0.95rem",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
flexWrap: "wrap",
gap: "8px",
}}
>
<span>
<Link to="/about">About Scaffold</Link>
</span>
{canUseStaffTools && (
<span style={toggleContainerStyle}>
{enableEditing && newConceptHandler && (
<Button
variant="outline-dark"
size="sm"
data-testid="new-concept-button"
onClick={newConceptHandler}
>
New Concept
</Button>
)}
{enableEditing && realignConceptsHandler && (
<Button
variant="outline-dark"
size="sm"
data-testid="realign-concepts-button"
onClick={realignConceptsHandler}
>
Realign Concepts
</Button>
)}
<Form.Check
type="switch"
id="enable-editing-toggle-control"
className="mb-0"
>
<Form.Check.Input
type="checkbox"
data-testid="enable-editing-toggle"
checked={enableEditing}
onChange={(e) =>
setStaffTool("enableEditing", e.target.checked)
}
/>
<Form.Check.Label data-testid="enable-editing-toggle-label">
Enable Editing
</Form.Check.Label>
</Form.Check>
<Form.Check
type="switch"
id="debug-mode-toggle-control"
className="mb-0"
>
<Form.Check.Input
type="checkbox"
data-testid="debug-mode-toggle"
checked={debugMode}
onChange={(e) => setStaffTool("debugMode", e.target.checked)}
/>
<Form.Check.Label data-testid="debug-mode-toggle-label">
Debug Mode
</Form.Check.Label>
</Form.Check>
</span>
)}
</div>
</footer>
);
}
|