handle a fail to load characters situation

This commit is contained in:
StevanFreeborn
2022-06-28 18:49:06 -05:00
parent 7c9e0ae566
commit 460245841b
4 changed files with 84 additions and 27 deletions
+21 -25
View File
@@ -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>
+30
View File
@@ -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>
);
}