Added trending page
parent
a41b50b3cc
commit
ee1bab191f
@ -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;
|
Loading…
Reference in new issue