spotifyplaylistarchive.com/src/layouts/PlaylistPageTab.astro

---
import BaseLayout from './BaseLayout.astro';

import type { PlaylistSnapshot } from '../models/playlist-snapshot';

interface Props {
  playlist: PlaylistSnapshot | null;
  title: string;
  description: string;
  errorOccurred: boolean;
}

const { playlistId } = Astro.params;
const { playlist, title, description, errorOccurred } = Astro.props as Props;
---

<BaseLayout title={title} description={description}>
  <div
    class:list={[
      'px-5 text-center flex flex-col gap-5 items-center',
      !errorOccurred ? 'mt-[5.5rem]' : 'w-screen h-screen justify-center'
    ]}
  >
  {
    !errorOccurred && playlist ? (
      <h1 class="font-bold md:text-4xl text-3xl">
        <a href={playlist.url} target="_blank" rel="noopener noreferrer">
          {title}
        </a>
        by
        <a
          href={playlist.owner.url}
          target="_blank"
          rel="noopener noreferrer"
        >
          {playlist.owner.name}
        </a>
      </h1>
      <div class="tabs mb-2 w-full flex lg:justify-center justify-start flex-nowrap overflow-x-auto overflow-y-hidden">
        <a class="tab text-base" href={`/playlists/${playlistId}/snapshots`}><i class="fa-solid fa-calendar" />Browse snapshots</a>
        <a class="tab text-base"><i class="fa-solid fa-plus-minus" />Compare snapshots</a>
        <a class="tab text-base"><i class="fa-solid fa-search" />Find a featured track</a>
        <a class="tab text-base"><i class="fa-solid fa-chart-line" />Show statistics</a>
      </div>
      <slot />
    ) : (
      <div class="alert alert-error max-w-xs justify-center shadow-lg">
        <span>{description}</span>
      </div>
    )
  }
  </div>
</BaseLayout>