101 lines
2.7 KiB
TypeScript
101 lines
2.7 KiB
TypeScript
import type React from "react";
|
|
|
|
import {
|
|
majorScale,
|
|
Pane,
|
|
Pulsar,
|
|
Small,
|
|
Strong,
|
|
Text,
|
|
TimeIcon,
|
|
} from "evergreen-ui";
|
|
|
|
import { Hashicon } from "@emeraldpay/hashicon-react";
|
|
import type { Protobuf } from "@meshtastic/meshtasticjs";
|
|
|
|
export interface MessageProps {
|
|
lastMsgSameUser: boolean;
|
|
message: string;
|
|
ack: boolean;
|
|
rxTime: Date;
|
|
sender?: Protobuf.NodeInfo;
|
|
}
|
|
|
|
export const Message = ({
|
|
lastMsgSameUser,
|
|
message,
|
|
ack,
|
|
rxTime,
|
|
sender,
|
|
}: MessageProps): JSX.Element => {
|
|
return (
|
|
<Pane marginBottom={majorScale(1)} className="group hover:bg-gray-200">
|
|
{lastMsgSameUser ? (
|
|
<Pane
|
|
marginX={majorScale(2)}
|
|
display="flex"
|
|
justifyContent="space-between"
|
|
marginTop={-majorScale(1)}
|
|
className={`${lastMsgSameUser ? "" : "py-1"}`}
|
|
>
|
|
<Pane
|
|
display="flex"
|
|
position="relative"
|
|
gap={majorScale(1)}
|
|
className="gap-2"
|
|
>
|
|
<Small
|
|
marginY="auto"
|
|
marginLeft="auto"
|
|
width={majorScale(3)}
|
|
paddingTop={majorScale(1)}
|
|
className="pt-1 text-transparent group-hover:text-gray-500"
|
|
>
|
|
{rxTime
|
|
.toLocaleTimeString(undefined, {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
})
|
|
.replace("AM", "")
|
|
.replace("PM", "")}
|
|
</Small>
|
|
<Text marginY="auto" className={`${ack ? "" : "animate-pulse"}`}>
|
|
{message}
|
|
</Text>
|
|
<Pulsar />
|
|
</Pane>
|
|
<Pane
|
|
display="flex"
|
|
gap={majorScale(1)}
|
|
paddingTop={majorScale(1)}
|
|
className="text-transparent group-hover:text-gray-500"
|
|
>
|
|
<TimeIcon />
|
|
<Small>25s</Small>
|
|
</Pane>
|
|
</Pane>
|
|
) : (
|
|
<Pane display="flex" marginX={majorScale(2)} gap={majorScale(1)}>
|
|
<Pane marginY="auto" width={majorScale(3)}>
|
|
<Hashicon value={(sender?.num ?? 0).toString()} size={32} />
|
|
</Pane>
|
|
<Pane>
|
|
<Pane display="flex" gap={majorScale(1)}>
|
|
<Strong cursor="default" size={500} className="hover:underline">
|
|
{sender?.user?.longName ?? "UNK"}
|
|
</Strong>
|
|
<Small marginY="auto">
|
|
{rxTime.toLocaleTimeString(undefined, {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
})}
|
|
</Small>
|
|
</Pane>
|
|
<Text className={`${ack ? "" : "animate-pulse"}`}>{message}</Text>
|
|
</Pane>
|
|
</Pane>
|
|
)}
|
|
</Pane>
|
|
);
|
|
};
|