Function HeaderWide

ui/src/message/Message.tsx:220–262

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

};

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

    return (
        <div className={classes.header}>
            <div className={classes.imageWrapper}>
                {image !== null ? (
                    <img
                        src={config.get('url') + image}
                        alt={`${appName} logo`}
                        width="50"
                        height="50"
                        className={classes.image}
                    />
                ) : null}
            </div>
            <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>
            </div>
            <Typography variant="body1" className={classes.date}>
                <TimeAgo date={date} formatter={TimeAgoFormatter.narrow} />
            </Typography>
            <IconButton
                onClick={fDelete}
                style={{padding: 14}}
                className={`${classes.trash} delete`}
                size="large">
                <Delete />
            </IconButton>
        </div>
    );
};
const HeaderSmall = ({
    appName,
    image,