Dwinzo_dev/app/src/components/footer/Footer.tsx

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>
              </>
            ) : (
              "No logs yet."
            )}
          </button>
        </div>
        <div className="version">
          V 0.01
          <div className="icon">
            <HelpIcon />
          </div>
        </div>
      </div>
    </div>
  );
};

export default Footer;