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

44 lines
1.8 KiB
TypeScript
Raw Normal View History

2024-01-20 16:16:14 +00:00
import Link from "next/link";
2024-07-15 16:07:04 +00:00
import type { IVtuber } from '@futureporn/types';
2024-07-10 22:11:18 +00:00
import { getVodsForVtuber } from "@/app/lib/vods";
2024-06-13 02:54:44 +00:00
import Image from "next/legacy/image"
2024-07-10 22:11:18 +00:00
import NotFound from "@/app/vt/[slug]/not-found";
2024-01-20 16:16:14 +00:00
import ArchiveProgress from "./archive-progress";
export default async function VTuberCard(vtuber: IVtuber) {
const { id, attributes: { slug, displayName, imageBlur, image }} = vtuber;
if (!imageBlur) return <p>this is a vtubercard with an invalid imageBlur={imageBlur}</p>
const vods = await getVodsForVtuber(id)
if (!vods) return <NotFound></NotFound>
return (
<Link
href={"/vt/"+slug}
className="column is-full-mobile is-half-tablet"
>
<div className="card">
<div className="card-content">
<div className="media">
<div className="media-left">
<figure className="image is-48x48">
<Image
className="is-rounded"
src={image}
alt={displayName}
2024-06-13 01:38:11 +00:00
objectFit="cover"
2024-01-20 16:16:14 +00:00
placeholder="blur"
blurDataURL={imageBlur}
width={48}
height={48}
/>
</figure>
</div>
<div className="media-content">
<p className="title is-4 mb-3">{displayName}</p>
<ArchiveProgress vtuber={vtuber}/>
</div>
</div>
</div>
</div>
</Link>
)
}