Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | 61x 61x 20x 20x | import React from 'react';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';
import Grid from '@material-ui/core/Grid';
import Pagination from '@material-ui/lab/Pagination';
import SearchRoundedIcon from '@material-ui/icons/SearchRounded';
import { makeStyles } from '@material-ui/core/styles';
import AccordionSection from './accordionSection';
import Container from '@material-ui/core/Container';
const useStyles = makeStyles((theme) => ({
message: {
display: 'flex',
marginTop: theme.spacing(12),
fontSize: '2rem',
color: theme.palette.secondary.dark,
},
messageIcon: {
width: '1.75em',
height: '1.75em',
marginRight: theme.spacing(1),
color: theme.palette.text.disabled,
},
title: {
color: theme.palette.secondary.dark,
},
titleContainer: {
paddingBottom: '25px',
},
}));
const FAQCard = (props) => {
const classes = useStyles();
return (
<Box className="containerGray" py={4} px={1}>
<Container>
<Grid container justify="center">
<Grid item xs={12} sm={9} lg={11} className={classes.titleContainer}>
<Typography variant="h6" className={classes.title}>{props.title}</Typography>
</Grid>
{
props.faqs.length > 0 ? (
<>
<AccordionSection faqs={props.faqs}/>
<Grid item xs={12}>
<Box my={3} display="flex" justifyContent="center">
<Pagination
color="secondary"
count={props.pages}
defaultPage={1}
disabled={props.pages <= 1}
onChange={props.onPageChange}
page={props.currentPageNum}
/>
</Box>
</Grid>
</>
) : (
<Typography variant='body1' className={classes.message}>
<SearchRoundedIcon className={classes.messageIcon}/>
<i>Sorry, no results found.</i>
</Typography>
)
}
</Grid>
</Container>
</Box>
);
};
export default FAQCard;
|