Added trending page

.prettierrc.json

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

src/components/Video/Grid.tsx

@@ -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;

src/components/Video/index.tsx

@@ -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;

src/interfaces/video.ts

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

src/pages/trending.tsx

@@ -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;

tsconfig.json

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