import Link from "next/link"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faPatreon } from "@fortawesome/free-brands-svg-icons"; import { faVideo } from "@fortawesome/free-solid-svg-icons"; import { getSafeDate, getDateFromSafeDate } from '@/lib/dates'; import { IVtuber } from '@/lib/vtubers'; import Image from 'next/image' import { LocalizedDate } from '@/components/localized-date' import { IMuxAsset, IMuxAssetResponse } from "@/lib/types"; import { IB2File } from "@/lib/b2File"; import VtuberButton from "./vtuber-button"; interface IVodCardProps { id: number; title: string; date: string; muxAsset: string | undefined; thumbnail: string | undefined; vtuber: IVtuber; } export default function VodCard({id, title, date, muxAsset, thumbnail = 'https://futureporn-b2.b-cdn.net/default-thumbnail.webp', vtuber}: IVodCardProps) { if (!vtuber?.attributes?.slug) return <div className="card"><p>VOD {id} is missing VTuber</p></div> return ( <div key={id} className="column is-full-mobile is-one-third-tablet is-one-fourth-desktop is-one-fifth-fullhd"> <div className="card"> <Link href={`/vt/${vtuber.attributes.slug}/vod/${getSafeDate(date)}`}> <div className="card-image"> <figure className="image is-16by9"> <Image src={thumbnail} alt={title} placeholder="blur" blurDataURL={vtuber.attributes.imageBlur} fill={true} style={{ objectFit: 'cover', }} /> </figure> </div> <div className="card-content"> <p className="subtitle">{vtuber.attributes.displayName}</p> <LocalizedDate date={new Date(date)} /> <p className="">{title}</p> </div> </Link> </div> </div> ) }