diff --git a/package.json b/package.json index f05e88e..f8dbfcf 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,8 @@ "next": "^12.1.0", "next-seo": "^5.1.0", "react": "^17.0.2", - "react-dom": "^17.0.2" + "react-dom": "^17.0.2", + "react-query": "^3.34.16" }, "devDependencies": { "@trivago/prettier-plugin-sort-imports": "^3.2.0", diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx index 744bb76..32c3927 100644 --- a/src/components/Navbar/index.tsx +++ b/src/components/Navbar/index.tsx @@ -65,7 +65,7 @@ const Navbar: FC = () => { pages={pages} /> - + = ({ videos }) => { {videos.map((video) => ( diff --git a/src/components/Video/index.tsx b/src/components/Video/index.tsx index ffc322e..1decaa5 100644 --- a/src/components/Video/index.tsx +++ b/src/components/Video/index.tsx @@ -1,33 +1,59 @@ +import Link from "next/link"; import { useRouter } from "next/router"; import { FC } from "react"; +import { useQuery } from "react-query"; + +import Avatar from "@mui/material/Avatar"; +import Box from "@mui/material/Box"; 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 Tooltip from "@mui/material/Tooltip"; import Typography from "@mui/material/Typography"; -import { Video } from "@interfaces/video"; +import { abbreviateNumber } from "@src/utils"; + +import { Channel, Quality } from "@interfaces/channel"; +import { Video as VideoModel } from "@interfaces/video"; -const Video: FC