41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
|
import { Link } from 'react-router-dom'
|
|||
|
|
import type { FeedVideoDto } from '../api/client'
|
|||
|
|
import { formatDuration, formatRelativeTime } from '../utils/format'
|
|||
|
|
|
|||
|
|
interface Props {
|
|||
|
|
video: FeedVideoDto
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function VideoCard({ video }: Props) {
|
|||
|
|
const duration = formatDuration(video.duration_seconds)
|
|||
|
|
const href = `/video/${video.youtube_video_id}`
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<li className="video-card">
|
|||
|
|
<Link to={href} className="video-thumbnail">
|
|||
|
|
{video.thumbnail_url ? (
|
|||
|
|
<img src={video.thumbnail_url} alt={video.title} />
|
|||
|
|
) : (
|
|||
|
|
<div className="video-thumbnail-placeholder" />
|
|||
|
|
)}
|
|||
|
|
{duration && <span className="duration-badge">{duration}</span>}
|
|||
|
|
</Link>
|
|||
|
|
<div className="video-info">
|
|||
|
|
<Link to={href} className="video-title" title={video.title}>
|
|||
|
|
{video.title}
|
|||
|
|
</Link>
|
|||
|
|
<div className="video-meta">
|
|||
|
|
{video.channel.title} · {formatRelativeTime(video.published_at)}
|
|||
|
|
</div>
|
|||
|
|
<div className="video-actions">
|
|||
|
|
<Link to={href} className="button-link">
|
|||
|
|
Смотреть
|
|||
|
|
</Link>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default VideoCard
|