115 lines
3.9 KiB
JavaScript
115 lines
3.9 KiB
JavaScript
import * as React from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import Grid from '@mui/material/Grid';
|
|
import Typography from '@mui/material/Typography';
|
|
import { styled } from '@mui/material/styles';
|
|
import NavigateNextRoundedIcon from '@mui/icons-material/NavigateNextRounded';
|
|
import { Chip } from '@mui/material';
|
|
import Author from './Author';
|
|
|
|
const StyledTypography = styled(Typography)({
|
|
display: '-webkit-box',
|
|
WebkitBoxOrient: 'vertical',
|
|
WebkitLineClamp: 2,
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
});
|
|
|
|
const TitleTypography = styled(Typography)(({ theme }) => ({
|
|
position: 'relative',
|
|
textDecoration: 'none',
|
|
'&:hover': { cursor: 'pointer' },
|
|
'& .arrow': {
|
|
visibility: 'hidden',
|
|
position: 'absolute',
|
|
right: 0,
|
|
top: '50%',
|
|
transform: 'translateY(-50%)',
|
|
},
|
|
'&:hover .arrow': {
|
|
visibility: 'visible',
|
|
opacity: 0.7,
|
|
},
|
|
'&:focus-visible': {
|
|
outline: '3px solid',
|
|
outlineColor: 'hsla(210, 98%, 48%, 0.5)',
|
|
outlineOffset: '3px',
|
|
borderRadius: '8px',
|
|
},
|
|
'&::before': {
|
|
content: '""',
|
|
position: 'absolute',
|
|
width: 0,
|
|
height: '1px',
|
|
bottom: 0,
|
|
left: 0,
|
|
backgroundColor: (theme.vars || theme).palette.text.primary,
|
|
opacity: 0.3,
|
|
transition: 'width 0.3s ease, opacity 0.3s ease',
|
|
},
|
|
'&:hover::before': {
|
|
width: '100%',
|
|
},
|
|
}));
|
|
|
|
export default function MostViewed({ mostViewedNews }) {
|
|
const [focusedCardIndex, setFocusedCardIndex] = React.useState(null);
|
|
|
|
const handleFocus = (index) => {
|
|
setFocusedCardIndex(index);
|
|
};
|
|
|
|
const handleBlur = () => {
|
|
setFocusedCardIndex(null);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<Typography variant="h2" gutterBottom>
|
|
Paling Banyak Dilihat
|
|
</Typography>
|
|
<Grid container spacing={8} columns={12} sx={{ my: 4 }}>
|
|
{mostViewedNews.map((news, index) => (
|
|
<Grid key={index} size={{ xs: 12, sm: 6 }}>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'space-between',
|
|
gap: 1,
|
|
height: '100%',
|
|
}}
|
|
>
|
|
<Typography gutterBottom variant="caption" component="div">
|
|
{news.categories.map((category, index) =>
|
|
<Chip label={category.name} color="success" variant="outlined" sx={{ mr: 1 }} key={index} />
|
|
)}
|
|
</Typography>
|
|
<TitleTypography
|
|
gutterBottom
|
|
variant="h6"
|
|
onFocus={() => handleFocus(index)}
|
|
onBlur={handleBlur}
|
|
tabIndex={0}
|
|
className={focusedCardIndex === index ? 'Mui-focused' : ''}
|
|
>
|
|
{news.title}
|
|
<NavigateNextRoundedIcon
|
|
className="arrow"
|
|
sx={{ fontSize: '1rem' }}
|
|
/>
|
|
</TitleTypography>
|
|
|
|
<StyledTypography variant="body2" color="text.secondary" gutterBottom>
|
|
{news.description}
|
|
</StyledTypography>
|
|
|
|
<Author author={news.author?.name} publishedAt={news.formatted_published_at} />
|
|
</Box>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
</div>
|
|
);
|
|
}
|