51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
import * as React from 'react'
|
|
import type { LogLine } from '@lastres/log-line'
|
|
|
|
export interface LogPanelProps {
|
|
logLines: LogLine[] | null
|
|
}
|
|
|
|
interface Style {
|
|
color?: string
|
|
background?: string
|
|
}
|
|
|
|
export default function LogPanel (props: LogPanelProps): JSX.Element {
|
|
const logLines = props.logLines
|
|
function generateLog (): React.ReactNode {
|
|
if (logLines === null || logLines.length < 1) {
|
|
return (
|
|
<>No log</>
|
|
)
|
|
}
|
|
return logLines.sort(function (a: LogLine, b: LogLine): number {
|
|
const aDate = Date.parse(a.date)
|
|
const bDate = Date.parse(b.date)
|
|
return aDate - bDate
|
|
}).map((item, i) => {
|
|
return <span key={i}>
|
|
<b>{item.date}</b> {
|
|
item.content.map((item, i) => {
|
|
const style: Style = {}
|
|
if (item.color !== undefined) {
|
|
style.color = item.color
|
|
}
|
|
if (item.background !== undefined) {
|
|
style.background = item.background
|
|
}
|
|
return <span key={i} style={style}>{item.text}</span>
|
|
})
|
|
} <br/>
|
|
</span>
|
|
})
|
|
}
|
|
|
|
return (
|
|
<code><pre>
|
|
{
|
|
generateLog()
|
|
}
|
|
</pre></code>
|
|
)
|
|
}
|