Added trending page

main
Guus van Meerveld 3 years ago
parent a41b50b3cc
commit ee1bab191f
Signed by: Guusvanmeerveld
GPG Key ID: 2BA7D7912771966E

@ -14,6 +14,7 @@
"^@mui/.*",
"^@src/.*",
"^@models/.*",
"^@interfaces/.*",
"^@utils/.*",
"^@components/.*",
".*sass$",

@ -0,0 +1,25 @@
import { FC } from "react";
import { Grid } from "@mui/material";
import { Video as VideoModel } from "@interfaces/video";
import Video from "@components/Video";
const VideoGrid: FC<{ videos: VideoModel[] }> = ({ videos }) => {
return (
<Grid
container
spacing={{ xs: 2, md: 3 }}
columns={{ xs: 3, sm: 9, md: 12 }}
>
{videos.map((video) => (
<Grid item key={video.id} xs={3}>
<Video {...video} />
</Grid>
))}
</Grid>
);
};
export default VideoGrid;

@ -0,0 +1,38 @@
import { useRouter } from "next/router";
import { FC } from "react";
import Card from "@mui/material/Card";
import CardActionArea from "@mui/material/CardActionArea";
import CardContent from "@mui/material/CardContent";
import CardMedia from "@mui/material/CardMedia";
import Typography from "@mui/material/Typography";
import { Video } from "@interfaces/video";
const Video: FC<Video> = ({ thumbnail, title, description, id }) => {
const router = useRouter();
return (
<Card sx={{ display: "inline-block" }}>
<CardActionArea onClick={() => router.push(`/video?id=${id}`)}>
<CardMedia
component="img"
image={thumbnail}
alt="video thumbnail"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="div">
{title}
</Typography>
<Typography variant="body2" color="text.secondary">
{description}
</Typography>
</CardContent>
</CardActionArea>
</Card>
);
};
export default Video;

@ -0,0 +1,6 @@
export interface Video {
thumbnail: string;
title: string;
description: string;
id: string;
}

@ -0,0 +1,39 @@
import { NextPage } from "next";
import { NextSeo } from "next-seo";
import Box from "@mui/material/Box";
import { Video as VideoModel } from "@interfaces/video";
import Layout from "@components/Layout";
import Grid from "@components/Video/Grid";
const exampleVideo = {
title: "Yeet",
description: "Yarr",
id: Math.random().toString(),
thumbnail: "https://invidious.privacy.gd/vi/qF1DTK4U1AM/maxresdefault.jpg"
};
const videos: VideoModel[] = [
exampleVideo,
exampleVideo,
exampleVideo,
exampleVideo,
exampleVideo
];
const Trending: NextPage = () => {
return (
<>
<NextSeo title="Trending" />
<Layout>
<Box sx={{ padding: { xs: 2, md: 5 } }}>
<Grid videos={videos} />
</Box>
</Layout>
</>
);
};
export default Trending;

@ -19,6 +19,7 @@
"paths": {
"@styles/*": ["styles/*"],
"@components/*": ["components/*"],
"@interfaces/*": ["interfaces/*"],
"@src/*": ["./*"]
}
},

Loading…
Cancel
Save