45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
|
import React from "react";
|
||
|
|
import { HelpIcon } from "../../icons/DashboardIcon";
|
||
|
|
import { useLogger } from "../log/LoggerContext";
|
||
|
|
|
||
|
|
const Footer = () => {
|
||
|
|
const { logs, setIsLogListVisible } = useLogger();
|
||
|
|
|
||
|
|
const lastLog = logs.length > 0 ? logs[logs.length - 1] : null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="footer-wrapper">
|
||
|
|
<div className="selection-wrapper">
|
||
|
|
<div className="selector-wrapper">
|
||
|
|
<div className="icon"></div>
|
||
|
|
<div className="selector">Selection</div>
|
||
|
|
</div>
|
||
|
|
<div className="selector-wrapper">
|
||
|
|
<div className="icon"></div>
|
||
|
|
<div className="selector">Rotate/Zoom</div>
|
||
|
|
</div>
|
||
|
|
<div className="selector-wrapper">
|
||
|
|
<div className="icon"></div>
|
||
|
|
<div className="selector">Pan/Context Menu</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="logs-wrapper">
|
||
|
|
<div className="logs-detail" onClick={() => setIsLogListVisible(true)}>
|
||
|
|
{lastLog
|
||
|
|
? `[${lastLog.type.toUpperCase()}] ${lastLog.message}`
|
||
|
|
: "No logs yet."}
|
||
|
|
</div>
|
||
|
|
<div className="version">
|
||
|
|
V 0.01
|
||
|
|
<div className="icon">
|
||
|
|
<HelpIcon />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Footer;
|