fp/packages/next/app/components/vod-card.tsx

61 lines
2.2 KiB
TypeScript
Raw Normal View History

2024-01-20 16:16:14 +00:00
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";
2024-03-29 07:28:02 +00:00
import VtuberButton from "./vtuber-button";
2024-01-20 16:16:14 +00:00
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">
2024-03-29 07:28:02 +00:00
<p className="subtitle">{vtuber.attributes.displayName}</p>
2024-01-20 16:16:14 +00:00
<LocalizedDate date={new Date(date)} />
2024-03-29 07:28:02 +00:00
<p className="">{title}</p>
2024-01-20 16:16:14 +00:00
</div>
</Link>
</div>
</div>
)
}