Dwinzo_dev/app/src/components/ui/log/LogList.tsx

// LogList.tsx
import React, { useState } from "react";
import { LogListIcon, CloseIcon } from "../../icons/ExportCommonIcons"; // Adjust path as needed
import { useLogger } from "./LoggerContext";
import { GetLogIcon } from "../../footer/getLogIcons";

const LogList: React.FC = () => {
  const { logs, clear, setIsLogListVisible } = useLogger();
  const [selectedTab, setSelectedTab] = useState<
    "all" | "info" | "warning" | "error" | "log" | "success"
  >("all");

  const formatTimestamp = (date: Date) => new Date(date).toLocaleTimeString();

  const filteredLogs =
    selectedTab === "all"
      ? [...logs].reverse()
      : [...logs].filter((log) => log.type === selectedTab).reverse();

  return (
    // eslint-disable-next-line
    <div
      className="log-list-container"
      onClick={() => setIsLogListVisible(false)}
    >
      <div
        className="log-list-wrapper"
        onClick={(e) => {
          e.stopPropagation();
        }}
      >
        <div className="log-header">
          <div className="log-header-wrapper">
            <div className="icon">
              <LogListIcon />
            </div>
            <div className="head">Log List</div>
          </div>
          <button
            title="close-btn"
            className="close"
            onClick={() => setIsLogListVisible(false)}
          >
            <CloseIcon />
          </button>
        </div>

        {/* Tabs */}
        <div className="log-nav-wrapper">
          {["all", "info", "warning", "error"].map((type) => (
            <button
              title="log-type"
              key={type}
              className={`log-nav ${selectedTab === type ? "active" : ""}`}
              onClick={() => setSelectedTab(type as any)}
            >
              {`${type.charAt(0).toUpperCase() + type.slice(1)} Logs`}
            </button>
          ))}
        </div>

        {/* Log Entries */}
        <div className="log-entry-wrapper">
          {filteredLogs.map((log) => (
            <div key={log.id} className={`log-entry ${log.type}`}>
              <div className="log-icon">{GetLogIcon(log.type)}</div>
              <div className="log-entry-message-container">
                <div className="log-entry-message">{log.message}</div>
                <div className="message-time">
                  {formatTimestamp(log.timestamp)}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default LogList;