@acrsolutions/chat-components
Version:
Un set di componenti per la creazione di un'applicazione di messaggistica
16 lines (15 loc) • 1.37 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { DoneAll } from '@mui/icons-material';
import DoneIcon from '@mui/icons-material/Done';
import { Composition } from 'atomic-layout';
import { useMemo } from 'react';
import { Twemoji } from 'react-emoji-render';
import { buildSentTime } from '../../utils';
import { StyledReactionWrapper } from '../../ui/messageStyle/StyledReactionWrapper';
import { Typography } from '@mui/material';
export function MessageFooter({ sentDate, readDate, deliveredDate, reaction, }) {
const sentDatePreview = useMemo(() => {
return sentDate ? buildSentTime(sentDate) : 'nessuna data invio';
}, [sentDate]);
return (_jsxs(Composition, { templateCols: "auto auto", gap: '1rem', marginTop: '0.3rem', justifyContent: "space-between", alignItems: "center", children: [_jsx("div", { children: reaction && (_jsx(StyledReactionWrapper, { children: _jsx(Twemoji, { text: reaction }) })) }), _jsxs(Composition, { marginLeft: 'auto', templateCols: "auto auto", gap: '0.3rem', alignItems: "center", children: [sentDatePreview && (_jsx(Typography, { variant: "caption", color: "disabled", children: sentDatePreview })), deliveredDate && !readDate && (_jsx(DoneIcon, { fontSize: "small", htmlColor: "forestgreen" })), readDate && _jsx(DoneAll, { fontSize: "small", htmlColor: "forestgreen" })] })] }));
}