fp/services/next/app/components/streams-list.tsx

59 lines
1.7 KiB
TypeScript

import React from 'react'
import Link from 'next/link';
import { IVtuber, IStream } from '@futureporn/types';
import { notFound } from 'next/navigation';
import { getAllStreams } from '@/app/lib/streams';
import { StreamSummary } from '@/app/components/stream';
interface IStreamsListProps {
vtubers: IVtuber[];
page: number;
pageSize: number;
}
interface IStreamsListHeadingProps {
slug: string;
displayName: string;
}
export function StreamsListHeading({ slug, displayName }: IStreamsListHeadingProps): React.JSX.Element {
return (
<div className='box'>
<h3 className='title'>
<Link href={`/vt/${slug}`}>{displayName}</Link> Streams
</h3>
</div>
)
}
export default async function StreamsList({ vtubers, page = 1, pageSize = 24 }: IStreamsListProps): Promise<React.JSX.Element> {
if (!vtubers) return <div>vtubers is not defined. vtubers:{JSON.stringify(vtubers, null, 2)}</div>
// const streams = await getStreamsForVtuber(vtubers[0].id);
const streams = await getAllStreams(['missing', 'issue', 'good']);
if (!streams) return notFound();
// @todo [ ] pagination
// @todo [ ] sortability
return (
<>
<h2 className='title is-2'>Stream Archive</h2>
<aside className="menu">
<ul className="menu-list">
{streams.length < 1 && <p className='section'><i>There are no streams</i></p>}
{streams.map((stream: IStream) => (
<li key={stream.id}>
<StreamSummary stream={stream}/>
</li>
))}
</ul>
</aside>
</>
);
}