From ee1bab191ff8c357bc9386fc0b022ca4bce6c474 Mon Sep 17 00:00:00 2001
From: Guusvanmeerveld <mail@guusvanmeerveld.dev>
Date: Mon, 21 Mar 2022 21:59:19 +0100
Subject: [PATCH] Added trending page

---
 .prettierrc.json               |  1 +
 src/components/Video/Grid.tsx  | 25 ++++++++++++++++++++++
 src/components/Video/index.tsx | 38 +++++++++++++++++++++++++++++++++
 src/interfaces/video.ts        |  6 ++++++
 src/pages/trending.tsx         | 39 ++++++++++++++++++++++++++++++++++
 tsconfig.json                  |  1 +
 6 files changed, 110 insertions(+)
 create mode 100644 src/components/Video/Grid.tsx
 create mode 100644 src/components/Video/index.tsx
 create mode 100644 src/interfaces/video.ts
 create mode 100644 src/pages/trending.tsx

diff --git a/.prettierrc.json b/.prettierrc.json
index cf4f856..dfd80d9 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -14,6 +14,7 @@
 		"^@mui/.*",
 		"^@src/.*",
 		"^@models/.*",
+		"^@interfaces/.*",
 		"^@utils/.*",
 		"^@components/.*",
 		".*sass$",
diff --git a/src/components/Video/Grid.tsx b/src/components/Video/Grid.tsx
new file mode 100644
index 0000000..69cd594
--- /dev/null
+++ b/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;
diff --git a/src/components/Video/index.tsx b/src/components/Video/index.tsx
new file mode 100644
index 0000000..ffc322e
--- /dev/null
+++ b/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;
diff --git a/src/interfaces/video.ts b/src/interfaces/video.ts
new file mode 100644
index 0000000..27b138f
--- /dev/null
+++ b/src/interfaces/video.ts
@@ -0,0 +1,6 @@
+export interface Video {
+	thumbnail: string;
+	title: string;
+	description: string;
+	id: string;
+}
diff --git a/src/pages/trending.tsx b/src/pages/trending.tsx
new file mode 100644
index 0000000..35fdc18
--- /dev/null
+++ b/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;
diff --git a/tsconfig.json b/tsconfig.json
index 21ddc48..5e301fa 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,6 +19,7 @@
 		"paths": {
 			"@styles/*": ["styles/*"],
 			"@components/*": ["components/*"],
+			"@interfaces/*": ["interfaces/*"],
 			"@src/*": ["./*"]
 		}
 	},