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 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | 61x 61x 61x 30x 30x 15x 90x 30x | import React from 'react'
import { Link as RouterLink } from 'react-router-dom';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import Chip from '@material-ui/core/Chip';
import makeStyles from '@material-ui/core/styles/makeStyles';
const useStyles = makeStyles((theme) => ({
sectionMainTitle:{
marginBottom:'32px',
[theme.breakpoints.down('md')]: {
marginBottom:'40px',
},
},
sectionSubTitle:{
marginBottom:'16px',
[theme.breakpoints.down('md')]: {
marginBottom:'31px',
},
},
homeTag: {
backgroundColor: theme.palette.background.default,
borderRadius: '8px',
padding: '0 4px',
textDecoration:'underline',
'&.MuiChip-outlined': {
borderColor: theme.palette.outline.gray,
},
[theme.breakpoints.down('md')]: {
height: '36px',
},
[theme.breakpoints.up('md')]: {
height: '42px',
},
},
trendingContainerStyle: {
marginTop: '80px',
paddingBottom: '96px',
},
}));
const topicData = [
{ detail: 'Covid-19', link: '/projects' },
{ detail: 'food', link: '/projects' },
{ detail: 'justice', link: '/projects' },
{ detail: 'Trending Topic 1', link: '/projects' },
{ detail: 'Trending Topic 2', link: '/projects' },
{ detail: 'Trending Topic 3', link: '/projects' },
];
const TrendingTopicsSection = () => {
const classes = useStyles();
const TrendingTopicList = () => {
return (
topicData.map((topic, key) => {
return (
<Chip
key={key}
label={topic.detail}
component={RouterLink}
to={{ pathname: topic.link, query: { search: topic.detail }}}
clickable
className = {classes.homeTag}
/>
);
})
);
}
return (
<Grid container className={classes.trendingContainerStyle}>
<Grid item lg={6}>
<Typography variant='h3' color='textPrimary' className={classes.sectionMainTitle}>
How are people using the CTI?
</Typography>
<Typography variant='h5' color='textSecondary' className={classes.sectionSubTitle}>
Trending Topics:
</Typography>
<TrendingTopicList />
</Grid>
</Grid>
);
};
export default TrendingTopicsSection;
|