fp/packages/next/app/vt/[slug]/page.tsx

247 lines
13 KiB
TypeScript
Raw Normal View History

2024-01-20 16:16:14 +00:00
import VodsList from '@/components/vods-list';
import Link from 'next/link';
import { getVtuberBySlug } from '@/lib/vtubers'
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faExternalLinkAlt, faBagShopping } from "@fortawesome/free-solid-svg-icons";
import { faFacebook, faInstagram, faPatreon, faYoutube, faTwitch, faTiktok, faXTwitter, faReddit, faDiscord } from "@fortawesome/free-brands-svg-icons";
import Image from 'next/image';
import OnlyfansIcon from "@/components/icons/onlyfans";
import PornhubIcon from '@/components/icons/pornhub';
import ThroneIcon from '@/components/icons/throne';
import LinktreeIcon from '@/components/icons/linktree';
import FanslyIcon from '@/components/icons/fansly';
import ChaturbateIcon from '@/components/icons/chaturbate';
import CarrdIcon from '@/components/icons/carrd';
import styles from '@/assets/styles/icon.module.css';
import { getVodsForVtuber } from '@/lib/vods';
import { notFound } from 'next/navigation';
import ArchiveProgress from '@/components/archive-progress';
import StreamsCalendar from '@/components/streams-calendar';
import { getAllStreamsForVtuber, getStreamsForVtuber } from '@/lib/streams';
import LinkableHeading from '@/components/linkable-heading';
export default async function Page({ params }: { params: { slug: string } }) {
const vtuber = await getVtuberBySlug(params.slug);
if (!vtuber) notFound();
const vods = await getVodsForVtuber(vtuber.id, 1, 9);
if (!vods) notFound();
const missingStreams = await getAllStreamsForVtuber(vtuber.id, ['missing']);
const issueStreams = await getAllStreamsForVtuber(vtuber.id, ['issue']);
const goodStreams = await getAllStreamsForVtuber(vtuber.id, ['good']);
// return (
// <>
// <p>hi mom!</p>
// <pre>
// <code>
// {JSON.stringify(missingStreams, null, 2)}
// </code>
// </pre>
// </>
// )
return (
<>
{vtuber && (
<>
<div className="box">
<div className="columns is-multiline">
<div className="column is-full">
<h1 className="title is-2">{vtuber.attributes.displayName}</h1>
</div>
<div className="column is-one-quarter">
<figure className="image is-rounded is-1by1">
<Image
className="is-rounded"
alt={vtuber.attributes.displayName}
src={vtuber.attributes.image}
fill={true}
placeholder='blur'
blurDataURL={vtuber.attributes.imageBlur}
/>
</figure>
</div>
<div className="column is-three-quarters">
<p className="is-size-5 mb-3">{vtuber.attributes.description1}</p>
<p className="is-size-5">{vtuber.attributes.description2}</p>
</div>
</div>
<h2 id="socials" className="title is-3">
<Link href="#socials">Socials</Link>
</h2>
<div className="column is-full mb-5">
<div className="columns has-text-centered is-multiline is-centered">
{vtuber.attributes.patreon && (
<div className="column is-3 is-narrow">
<Link href={vtuber.attributes.patreon} className="subtitle is-5">
<span className="mr-2"><FontAwesomeIcon icon={faPatreon} className="fab fa-patreon" /></span><span className="mr-2">Patreon</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
</Link>
</div>
)}
{vtuber.attributes.twitter && (
<div className="column is-3 is-narrow">
<Link target="_blank" href={vtuber.attributes.twitter} className="subtitle is-5">
<span className="mr-2"><FontAwesomeIcon icon={faXTwitter} className="fab fa-x-twitter" /></span><span className="mr-2">Twitter</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
</Link>
</div>
)}
{vtuber.attributes.youtube && (
<div className="column is-3 is-narrow">
<Link target="_blank" href={vtuber.attributes.youtube} className="subtitle is-5">
<span className="mr-2"><FontAwesomeIcon icon={faYoutube} className="fab fa-youtube" /></span><span className="mr-2">YouTube</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
</Link>
</div>
)}
{vtuber.attributes.twitch && (
<div className="column is-3 is-narrow">
<Link target="_blank" href={vtuber.attributes.twitch} className="subtitle is-5">
<span className="mr-2"><FontAwesomeIcon icon={faTwitch} className="fab fa-twitch" /></span><span className="mr-2">Twitch</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
</Link>
</div>
)}
{vtuber.attributes.tiktok && (
<div className="column is-3 is-narrow">
<Link target="_blank" href={vtuber.attributes.tiktok} className="subtitle is-5">
<span className="mr-2"><FontAwesomeIcon icon={faTiktok} className="fab fa-tiktok" /></span><span className="mr-2">TikTok</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
</Link>
</div>
)}
{vtuber.attributes.fansly && (
<div className="column is-3 is-narrow">
<Link target="_blank" href={vtuber.attributes.fansly} className='subtitle is-5'>
<span className='mr-2'><FanslyIcon width={20} height={20} className={styles.icon}/></span><span className="mr-2">Fansly</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
</Link>
</div>
)}
{vtuber.attributes.onlyfans && (
<div className="column is-3 is-narrow">
<Link target="_blank" href={vtuber.attributes.onlyfans} className='subtitle is-5'>
<span className='mr-2'>
<OnlyfansIcon width={20} height={20} className={styles.icon}></OnlyfansIcon>
</span><span className="mr-2">OnlyFans</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
</Link>
</div>
)}
{vtuber.attributes.pornhub && (
<div className="column is-3 is-narrow">
<Link target="_blank" href={vtuber.attributes.pornhub} className='subtitle is-5'>
<span className='mr-2'><PornhubIcon width={20} height={20} className={styles.icon}/></span><span className="mr-2">Pornhub</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
</Link>
</div>
)}
{vtuber.attributes.reddit && (
<div className="column is-3 is-narrow">
<Link target="_blank" href={vtuber.attributes.reddit} className="subtitle is-5">
<span className="mr-2"><FontAwesomeIcon icon={faReddit} className="fab fa-reddit" /></span><span className="mr-2">Reddit</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
</Link>
</div>
)}
{vtuber.attributes.discord && (
<div className="column is-3 is-narrow">
<Link target="_blank" href={vtuber.attributes.discord} className="subtitle is-5">
<span className="mr-2"><FontAwesomeIcon icon={faDiscord} className="fab fa-discord" /></span><span className="mr-2">Discord</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
</Link>
</div>
)}
{vtuber.attributes.instagram && (
<div className="column is-3 is-narrow">
<Link target="_blank" href={vtuber.attributes.instagram} className="subtitle is-5">
<span className="mr-2"><FontAwesomeIcon icon={faInstagram} className="fab fa-instagram" /></span><span className="mr-2">Instagram</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
</Link>
</div>
)}
{vtuber.attributes.facebook && (
<div className="column is-3 is-narrow">
<Link target="_blank" href={vtuber.attributes.facebook} className="subtitle is-5">
<span className="mr-2"><FontAwesomeIcon icon={faFacebook} className="fab fa-facebook" /></span><span className="mr-2">Facebook</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
</Link>
</div>
)}
{vtuber.attributes.merch && (
<div className="column is-3 is-narrow">
<Link target="_blank" href={vtuber.attributes.merch} className="subtitle is-5">
<span className="mr-2"><FontAwesomeIcon icon={faBagShopping} className="fas fa-bag-shopping" /></span><span className="mr-2">Merch</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
</Link>
</div>
)}
{vtuber.attributes.chaturbate && (
<div className="column is-3 is-narrow">
<Link target="_blank" href={vtuber.attributes.chaturbate} className='subtitle is-5'>
<span className='mr-2'><ChaturbateIcon width={20} className={styles.icon}/></span><span className="mr-2">Chaturbate</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
</Link>
</div>
)}
{vtuber.attributes.throne && (
<div className="column is-3 is-narrow">
<Link target="_blank" href={vtuber.attributes.throne} className='subtitle is-5'>
<span className='mr-2'><ThroneIcon width={20} height={20} className={styles.icon}/></span><span className="mr-2">Throne</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
</Link>
</div>
)}
{vtuber.attributes.linktree && (
<div className="column is-3 is-narrow">
<Link target="_blank" href={vtuber.attributes.linktree} className='subtitle is-5'>
<span className='mr-2'><LinktreeIcon width={20} height={20} className={styles.icon}/></span><span className="mr-2">Linktree</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
</Link>
</div>
)}
{vtuber.attributes.carrd && (
<div className="column is-3 is-narrow">
<Link target="_blank" href={vtuber.attributes.carrd} className='subtitle is-5'>
<span className='mr-2'><CarrdIcon width={20} height={20} className={styles.icon}/></span><span className="mr-2">Carrd</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
</Link>
</div>
)}
</div>
</div>
{/* <h2 id="toys" className="title is-3">
<Link href="#toys">Toys</Link>
</h2>
<>
<ToysList vtuber={vtuber} toys={toys} page={1} pageSize={toySampleCount} />
{(toys.pagination.total > toySampleCount) && <Link href={`/vt/${vtuber.slug}/toys/1`} className='button mb-5'>See all of {vtuber.displayName}'s toys</Link>}
</> */}
<h2 id="vods" className="title is-3">
<Link href="#vods">Vods</Link>
</h2>
<VodsList vtuber={vtuber} vods={vods.data} page={1} pageSize={9} />
{
(vtuber.attributes.vods) ? (
<Link className='button mb-5' href={`/vt/${vtuber.attributes.slug}/vods/1`}>See all {vtuber.attributes.displayName} vods</Link>
) : (<p className='section'><i>No VODs have been added, yet.</i></p>)
}
<h2 id="streams" className='title is-3'>
<Link href="#streams">Streams</Link>
</h2>
<StreamsCalendar missingStreams={missingStreams} issueStreams={issueStreams} goodStreams={goodStreams} />
{/*
<h2 id="progress" className='title is-3'>
<Link href="#progress">Archive Progress</Link>
</h2>
<ArchiveProgress vtuber={vtuber} /> */}
</div>
</>
)}
</>
);
}