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

60 lines
1.7 KiB
TypeScript
Raw Normal View History

2024-01-20 16:16:14 +00:00
import React from 'react'
import Link from 'next/link';
2024-07-10 22:11:18 +00:00
import { IVtuber } from 'types';
2024-01-20 16:16:14 +00:00
import { notFound } from 'next/navigation';
2024-07-10 22:11:18 +00:00
import { getAllStreams } from '@/app/lib/streams';
import { IStream } from 'types';
import { StreamSummary } from '@/app/components/stream';
2024-01-20 16:16:14 +00:00
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) => (
2024-02-02 23:50:24 +00:00
<li key={stream.id}>
2024-01-20 16:16:14 +00:00
<StreamSummary stream={stream}/>
</li>
))}
</ul>
</aside>
</>
);
}