57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
import React from "react";
|
|
import { HelpIcon } from "../icons/DashboardIcon";
|
|
import { useLogger } from "../ui/log/LoggerContext";
|
|
import { GetLogIcon } from "./getLogIcons";
|
|
|
|
const Footer: React.FC = () => {
|
|
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="bg-dummy left-top"></div>
|
|
<div className="bg-dummy right-bottom"></div>
|
|
<div className="log-container">
|
|
<button
|
|
className={`logs-detail ${lastLog ? lastLog.type : ""}`}
|
|
onClick={() => setIsLogListVisible(true)}
|
|
>
|
|
{lastLog ? (
|
|
<>
|
|
<span className="log-icon">{GetLogIcon(lastLog.type)}</span>
|
|
<span className="log-message">{lastLog.message}</span>
|
|
</>
|
|
) : (
|
|
"There are no logs to display at the moment."
|
|
)}
|
|
</button>
|
|
</div>
|
|
<div className="version">
|
|
V 0.01
|
|
<div className="icon">
|
|
<HelpIcon />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Footer;
|