aswi2022code-of-duty-gitlab/frontend/src/features/TrackingTool/ProcessedText/ProcessedTextDisplay.tsx @ 80e18558

import { Card, CardContent, Stack, Typography } from '@mui/material'
import { Fragment } from 'react'
import { useSelector } from 'react-redux'
import { formatHtmlStringToReactDom } from '../../../utils/formatting/HtmlUtils'
import { RootState } from '../../redux/store'

const ProcessedTextDisplay = () => {
    const pathDto = useSelector(
        (state: RootState) => state.trackingTool.pathDto
    )

    return (
        <Fragment>
            {pathDto && (
                <Card variant="outlined" sx={{maxHeight: '50vh'}}>
                    <CardContent>
                        <Stack direction="column">
                            <Typography
                                variant="h5"
                                sx={{ mb: 1 }}
                                fontWeight="600"
                            >
                                Processed Text
                            </Typography>
                            <Typography variant="body2">
                                {formatHtmlStringToReactDom(pathDto.text ?? '')}
                            </Typography>
                        </Stack>
                    </CardContent>
                </Card>
            )}
        </Fragment>
    )
}

export default ProcessedTextDisplay