Files
yt-dlp-webui/frontend/src/components/ArchiveResult.tsx
marcobaobao 975784ed72 Code refactoring and set up format selection
Set up format selection and archive download for next releases
2022-06-02 17:01:26 +02:00

30 lines
933 B
TypeScript

import { Card, CardActionArea, CardContent, CardMedia, Skeleton, Typography } from "@mui/material";
import { ellipsis } from "../utils";
type Props = {
title: string,
thumbnail: string,
url: string,
}
export function ArchiveResult({ title, thumbnail, url }: Props) {
return (
<Card>
<CardActionArea onClick={() => window.open(url)}>
{thumbnail ?
<CardMedia
component="img"
height={180}
image={thumbnail}
/> :
<Skeleton variant="rectangular" height={180} />
}
<CardContent>
<Typography gutterBottom variant="body2" component="div">
{ellipsis(title, 72)}
</Typography>
</CardContent>
</CardActionArea>
</Card>
)
}