RawImageDataRender

import React from "react";
import "./anwverl_basis.css";
import HtmlViewer from "../html_viewer";
import { Typography, withStyles } from "@material-ui/core";
import Grid from "@material-ui/core/Grid";

const styles = theme => ({
    container: {
        padding: 20,
        '&:last-child': {
            paddingTop: 0
        }
    },
    headerContainer: {
        display: 'flex',
        flexDirection: 'row',
        background: '#eee'
    },
    headerTypography: {
        display: 'flex',
        flexDirection: 'column',
        paddingLeft: 10
    },
    spacer: {
        flexGrow: 1
    },
    bookCover: {
        width: 80
    },
    subline: {
        margin:0,
        padding:0
    }
});

const BookContentViewerComponent = ({
    classes,
    citation,
    book,
    loadBook,
    loadCitations,
    bookId,
    citationId
}) => {
    return (
        book.id !== 0 &&
    citation.citationId !== "" && (
            <React.Fragment>
                <div className={`${classes.container} ${classes.headerContainer}`}>
                    <img src={book.coverImageData} alt={book.name}className={classes.bookCover}/>
                    <div className={classes.headerTypography}>
                        <p className={classes.spacer}></p>
                        <Typography variant="h5" component="h3" className={classes.headline}>
                            {book.author}: {book.name}
                        </Typography>
                        <Typography variant="subtitle1" paragraph component="p" className={classes.subline}>
                            {citation.description}
                        </Typography>
                    </div>
                </div>
                <Grid container className={classes.container}>
                    <Grid item xs={12}>
                        {citation.entries.map((c, i) => {
                            return (
                                <React.Fragment key={i}>
                                    <HtmlViewer rawHtml={c.markup} />
                                </React.Fragment>
                            );
                        })}
                    </Grid>
                </Grid>
            </React.Fragment>
        )
    );
};

export default withStyles(styles)(BookContentViewerComponent);