87 lines
2.6 KiB
TypeScript
87 lines
2.6 KiB
TypeScript
import React from "react";
|
|
import { HelpIcon } from "../icons/DashboardIcon";
|
|
import { useLogger } from "../ui/log/LoggerContext";
|
|
import { GetLogIcon } from "./getLogIcons";
|
|
import {
|
|
CurserLeftIcon,
|
|
CurserMiddleIcon,
|
|
CurserRightIcon,
|
|
} from "../icons/LogIcons";
|
|
import ShortcutHelper from "./shortcutHelper";
|
|
import { useShortcutStore } from "../../store/builder/store";
|
|
import { usePlayButtonStore } from "../../store/usePlayButtonStore";
|
|
|
|
const Footer: React.FC = () => {
|
|
const { logs, setIsLogListVisible } = useLogger();
|
|
const lastLog = logs.length > 0 ? logs[logs.length - 1] : null;
|
|
|
|
const { isPlaying } = usePlayButtonStore();
|
|
const { showShortcuts, setShowShortcuts } = useShortcutStore();
|
|
|
|
return (
|
|
<div className="footer-container">
|
|
<div className="footer-wrapper">
|
|
<div className="selection-wrapper">
|
|
<div className="selector-wrapper">
|
|
<div className="icon">
|
|
<CurserLeftIcon />
|
|
</div>
|
|
<div className="selector">Selection</div>
|
|
</div>
|
|
<div className="selector-wrapper">
|
|
<div className="icon">
|
|
<CurserMiddleIcon />
|
|
</div>
|
|
<div className="selector">Rotate/Zoom</div>
|
|
</div>
|
|
<div className="selector-wrapper">
|
|
<div className="icon">
|
|
<CurserRightIcon />
|
|
</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
|
|
id="log-details-buttton"
|
|
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>
|
|
|
|
{!isPlaying && (
|
|
<div
|
|
className={`shortcut-helper-overlay ${
|
|
showShortcuts ? "visible" : ""
|
|
}`}
|
|
>
|
|
<ShortcutHelper setShowShortcuts={setShowShortcuts}/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Footer;
|