62 lines
2.2 KiB
TypeScript
62 lines
2.2 KiB
TypeScript
import { IVod } from "@futureporn/types";
|
|
import Link from "next/link";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
|
|
import { getNextVod, getPreviousVod, getUrl } from "../lib/vods";
|
|
import { getLocalizedDate } from "../lib/vods";
|
|
import Footer from "./footer";
|
|
|
|
export default async function VodPage2 ({ vod }: { vod: IVod }) {
|
|
|
|
// use vod 337 for prototyping, because 337 has both timestamps and tags.
|
|
|
|
const nextVod = await getNextVod(vod)
|
|
const previousVod = await getPreviousVod(vod)
|
|
const slug = vod.vtuber.slug
|
|
|
|
return (
|
|
<>
|
|
<p className="title">VodPage2</p>
|
|
<p>@todo insert video player here</p>
|
|
<p>@todo insert title here</p>
|
|
<p>@todo insert notes</p>
|
|
<p>@todo insert tags here</p>
|
|
<p>@todo insert timestamps here</p>
|
|
<nav className="level mt-5">
|
|
<div className='level-left'>
|
|
<div className='level-item'>
|
|
{!!previousVod && (
|
|
<Link className='button' href={getUrl(previousVod, slug, previousVod.date_2)}>
|
|
<FontAwesomeIcon
|
|
icon={faChevronLeft}
|
|
className='fas faChevronLeft'
|
|
></FontAwesomeIcon>
|
|
<span className="ml-2">Prev VOD {getLocalizedDate(previousVod)}</span>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className='level-center'>
|
|
<div className='level-item'>
|
|
<p className='has-text-grey-darker'>ID {vod.id}</p>
|
|
</div>
|
|
</div>
|
|
<div className='level-right'>
|
|
<div className='level-item'>
|
|
{!!nextVod && (
|
|
<Link className='button' href={getUrl(nextVod, slug, nextVod.date_2)}>
|
|
<span className="mr-2">Next VOD {getLocalizedDate(nextVod)}</span>
|
|
<FontAwesomeIcon
|
|
icon={faChevronRight}
|
|
className='fas faChevronRight'
|
|
></FontAwesomeIcon>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</>
|
|
)
|
|
}
|
|
|