You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
72 lines
1.6 KiB
72 lines
1.6 KiB
import Link from "next/link";
|
|
|
|
import { FC } from "react";
|
|
|
|
import Avatar from "@mui/material/Avatar";
|
|
import Box from "@mui/material/Box";
|
|
import Paper from "@mui/material/Paper";
|
|
import Typography from "@mui/material/Typography";
|
|
import { useTheme } from "@mui/material/styles";
|
|
|
|
import { abbreviateNumber, formatNumber } from "@src/utils/";
|
|
|
|
import { ChannelResult } from "@interfaces/api/search";
|
|
|
|
const Channel: FC<{ channel: ChannelResult }> = ({ channel }) => {
|
|
const theme = useTheme();
|
|
|
|
const thumbnail = channel.authorThumbnails.find(
|
|
(thumbnail) => thumbnail.height == 512
|
|
)?.url as string;
|
|
|
|
return (
|
|
<Link
|
|
passHref
|
|
href={{ pathname: "/channel", query: { c: channel.authorId } }}
|
|
>
|
|
<a>
|
|
<Paper sx={{ my: 2 }}>
|
|
<Box
|
|
sx={{
|
|
p: 3,
|
|
display: { md: "flex", xs: "block" },
|
|
alignItems: "center"
|
|
}}
|
|
>
|
|
<Avatar
|
|
sx={{
|
|
width: 96,
|
|
height: 96,
|
|
mx: { md: 3, xs: "auto" },
|
|
mb: { md: 0, xs: 2 }
|
|
}}
|
|
src={thumbnail}
|
|
alt={channel.author}
|
|
/>
|
|
|
|
<Box sx={{ textAlign: { md: "left", xs: "center" } }}>
|
|
<Typography variant="h5">{channel.author}</Typography>
|
|
<Typography
|
|
variant="subtitle1"
|
|
color={theme.palette.text.secondary}
|
|
>
|
|
{abbreviateNumber(channel.subCount)} subscribers •{" "}
|
|
{formatNumber(channel.videoCount)} videos
|
|
</Typography>
|
|
|
|
<Typography
|
|
variant="subtitle1"
|
|
color={theme.palette.text.secondary}
|
|
>
|
|
{channel.description}
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
</Paper>
|
|
</a>
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
export default Channel;
|