Function HeaderSmall

ui/src/message/Message.tsx:263–305

({
    appName,
    image,
    date,
    fDelete,
    title,
}: Pick<IProps, 'appName' | 'image' | 'fDelete' | 'date' | 'title'>)

    );
};
const HeaderSmall = ({
    appName,
    image,
    date,
    fDelete,
    title,
}: Pick<IProps, 'appName' | 'image' | 'fDelete' | 'date' | 'title'>) => {
    const {classes} = useStyles();

    return (
        <div className={classes.header}>
            <div className={classes.headerTitle}>
                <Typography className="title" variant="h5" lineHeight={1.2}>
                    {title}
                </Typography>
                <Typography variant="subtitle1" fontSize={12} style={{opacity: 0.7}}>
                    {appName}
                </Typography>
                <Typography variant="body1" className={classes.date}>
                    <TimeAgo date={date} formatter={TimeAgoFormatter.long} />
                </Typography>
            </div>
            <div style={{display: 'flex', alignItems: 'end', flexDirection: 'column'}}>
                <IconButton
                    onClick={fDelete}
                    style={{padding: 14}}
                    className={`${classes.trash} delete`}
                    size="large">
                    <Delete />
                </IconButton>
                <div style={{width: 30, height: 30}}>
                    {image !== null ? (
                        <img
                            src={config.get('url') + image}
                            alt={`${appName} logo`}
                            className={classes.image}
                        />
                    ) : null}
                </div>
            </div>
        </div>
    );
};

export default Message;