64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
import CallMadeIcon from "@mui/icons-material/CallMade";
|
|
import CallReceivedIcon from "@mui/icons-material/CallReceived";
|
|
import QuestionMarkIcon from "@mui/icons-material/QuestionMark";
|
|
import React from "react";
|
|
import { match } from "ts-pattern";
|
|
import { InboxEntry } from "../api/InboxApi";
|
|
import { fmtDateFromTime } from "../utils/DateUtils";
|
|
import { AmountWidget } from "./AmountWidget";
|
|
import { UploadedFileWidget } from "./UploadedFileWidget";
|
|
|
|
export function InboxEntryWidget(p: { entry: InboxEntry }): React.ReactElement {
|
|
return (
|
|
<span
|
|
style={{
|
|
display: "inline-flex",
|
|
alignItems: "center",
|
|
height: "100%",
|
|
}}
|
|
>
|
|
{/* File */}
|
|
<UploadedFileWidget small file_id={p.entry.file_id} />
|
|
|
|
{/* Icon */}
|
|
{match(p.entry.amount)
|
|
.when(
|
|
(v) => v === undefined,
|
|
() => <QuestionMarkIcon color="secondary" />
|
|
)
|
|
.when(
|
|
(v) => v > 0,
|
|
() => <CallReceivedIcon color="success" />
|
|
)
|
|
.otherwise(() => (
|
|
<CallMadeIcon color="error" />
|
|
))}
|
|
|
|
<span
|
|
style={{
|
|
marginLeft: "5px",
|
|
display: "inline-flex",
|
|
flexDirection: "column",
|
|
justifyContent: "center",
|
|
height: "100%",
|
|
}}
|
|
>
|
|
<span style={{ height: "1em", lineHeight: 1 }}>
|
|
{(p.entry.label?.length ?? 0) > 0 ? p.entry.label : <i>No label</i>}
|
|
</span>
|
|
<span style={{ display: "flex", alignItems: "center", lineHeight: 1 }}>
|
|
{p.entry.amount ? (
|
|
<AmountWidget amount={p.entry.amount} />
|
|
) : (
|
|
<i>No amount</i>
|
|
)}
|
|
<span style={{ width: "0.5em" }} />
|
|
•
|
|
<span style={{ width: "0.5em" }} />
|
|
{fmtDateFromTime(p.entry.time)}
|
|
</span>
|
|
</span>
|
|
</span>
|
|
);
|
|
}
|