86 lines
2.4 KiB
TypeScript
86 lines
2.4 KiB
TypeScript
// LogList.tsx
|
|
import React, { useState } from "react";
|
|
import {
|
|
LogListIcon,
|
|
TickIcon,
|
|
LogInfoIcon,
|
|
WarningIcon,
|
|
ErrorIcon,
|
|
CloseIcon,
|
|
} from "../../icons/ExportCommonIcons"; // Adjust path as needed
|
|
import { useLogger } from "./LoggerContext";
|
|
|
|
const LogList: React.FC = () => {
|
|
const { logs, clear, setIsLogListVisible } = useLogger();
|
|
const [selectedTab, setSelectedTab] = useState<
|
|
"all" | "info" | "warning" | "error" | "log"
|
|
>("all");
|
|
|
|
const getLogIcon = (type: string) => {
|
|
switch (type) {
|
|
case "info":
|
|
return <LogInfoIcon />;
|
|
case "error":
|
|
return <ErrorIcon />;
|
|
case "warning":
|
|
return <WarningIcon />;
|
|
case "log":
|
|
default:
|
|
return <LogInfoIcon />;
|
|
}
|
|
};
|
|
|
|
const formatTimestamp = (date: Date) => new Date(date).toLocaleTimeString();
|
|
|
|
const filteredLogs =
|
|
selectedTab === "all"
|
|
? [...logs].reverse()
|
|
: [...logs].filter((log) => log.type === selectedTab).reverse();
|
|
|
|
return (
|
|
<div className="log-list-container">
|
|
<div className="log-list-wrapper">
|
|
<div className="log-header">
|
|
<div className="log-header-wrapper">
|
|
<div className="icon">
|
|
<LogListIcon />
|
|
</div>
|
|
<div className="head">Log List</div>
|
|
</div>
|
|
<div className="close" onClick={() => setIsLogListVisible(false)}>
|
|
{/* <CloseIcon /> */}X
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<div className="log-nav-wrapper">
|
|
{["all", "info", "warning", "error"].map((type) => (
|
|
<div
|
|
key={type}
|
|
className={`log-nav ${selectedTab === type ? "active" : ""}`}
|
|
onClick={() => setSelectedTab(type as any)}
|
|
>
|
|
{`${type.charAt(0).toUpperCase() + type.slice(1)} Logs`}
|
|
</div>
|
|
))}
|
|
</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">
|
|
[{formatTimestamp(log.timestamp)}] [{log.type.toUpperCase()}]{" "}
|
|
{log.message}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LogList;
|