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

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();

  // @todo
//   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>
        </>
      )}
    </>
  );
}