To enhance the user experience, I prioritize leveraging MUI while minimizing the reliance on CSS styles until the foundational elements are in place and functioning as desired.
One suggestion is to transform your one-dimensional array of video files into a new two-dimensional grid (3 x N).
import { Grid, Container, Paper, Typography } from '@mui/material';
const testUrl =
'https://fastly.picsum.photos/id/237/200/200.jpg?hmac=zHUGikXUDyLCCmvyww1izLK3R3k8oRYBRiTizZEdyfI';
// Sample data
const videoFiles = [
{name: 'Awesome Adventure', imageUrl: testUrl, link: '#', release: '2023-01-01', popularity: 80},
{name: 'Fantastic Journey', imageUrl: testUrl, link: '#', release: '2023-02-15', popularity: 92},
{name: 'Epic Exploration', imageUrl: testUrl, link: '#', release: '2023-03-21', popularity: 65},
{name: 'Amazing Discovery', imageUrl: testUrl, link: '#', release: '2023-04-10', popularity: 87},
{name: 'Cool Quest', imageUrl: testUrl, link: '#', release: '2023-05-05', popularity: 75},
{name: 'Unbelievable Voyage', imageUrl: testUrl, link: '#', release: '2023-06-18', popularity: 89},
{name: 'Incredible Expedition', imageUrl: testUrl, link: '#', release: '2023-07-30', popularity: 78},
{name: 'Exciting Trek', imageUrl: testUrl, link: '#', release: '2023-08-22', popularity: 94},
{name: 'Breathtaking Safari', imageUrl: testUrl, link: '#', release: '2023-09-14', popularity: 82},
{name: 'Adventurous Safari', imageUrl: testUrl, link: '#', release: '2023-10-09', popularity: 88},
];
const arrayToGrid = (arr, elementsPerRow) => {
const result = [];
for (let i = 0; i < arr.length; i += elementsPerRow) {
result.push(arr.slice(i, i + elementsPerRow));
}
return result;
};
const videoGrid = arrayToGrid(videoFiles, 3);
// Component for displaying Video data with details
const VideoBox = ({ name, imageUrl }) => (
<Paper
elevation={3}
style={{
padding: 16,
textAlign: 'center',
display: 'flex',
flexDirection: 'column',
}}
>
<img
src={imageUrl}
alt={name}
style={{ maxWidth: '100%', height: 'auto', marginBottom: 8 }}
/>
<Typography variant='subtitle1'>{name}</Typography>
</Paper>
);
// Main component rendering the grid
const Home = () => (
<Container maxWidth='md' style={{ marginTop: 16 }}>
<Grid container spacing={3}>
{videoGrid.map((row) =>
row.map((vidData, idx) => (
<Grid key={idx} item xs={12} sm={4}>
<VideoBox {...vidData} />
</Grid>
))
)}
</Grid>
</Container>
);
export default Home;