handle a fail to load characters situation
This commit is contained in:
@@ -17,34 +17,30 @@ export default function CharacterCard(props) {
|
||||
<Card.Body>
|
||||
|
||||
<Card.Title>{characterName}</Card.Title>
|
||||
|
||||
<Card.Text>
|
||||
|
||||
<Table>
|
||||
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
|
||||
<td className='fw-bold'>First Episode:</td>
|
||||
|
||||
<td>{firstEpisode}</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td className='fw-bold'>Last Episode:</td>
|
||||
|
||||
<td>{lastEpisode}</td>
|
||||
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
<Table>
|
||||
|
||||
</Table>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
|
||||
<td className='fw-bold'>First Episode:</td>
|
||||
|
||||
<td>{firstEpisode}</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td className='fw-bold'>Last Episode:</td>
|
||||
|
||||
<td>{lastEpisode}</td>
|
||||
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
|
||||
</Card.Text>
|
||||
</Table>
|
||||
|
||||
</Card.Body>
|
||||
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
import React from 'react';
|
||||
|
||||
import Container from 'react-bootstrap/Container';
|
||||
import Row from 'react-bootstrap/Row';
|
||||
import Col from 'react-bootstrap/Col';
|
||||
|
||||
export default function LoadingError(props) {
|
||||
return (
|
||||
<Container className='my-auto'>
|
||||
|
||||
<Row>
|
||||
|
||||
<Col className='text-center'>
|
||||
|
||||
<p>{props.message}</p>
|
||||
|
||||
<button
|
||||
className='btn btn-try-again'
|
||||
onClick={props.onClick}
|
||||
>
|
||||
Try again
|
||||
</button>
|
||||
|
||||
</Col>
|
||||
|
||||
</Row>
|
||||
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user