starpod/src/components/EpisodeList.astro at 2a4577d28798c7ea2c5d657b21e0833baa179028 · shipshapecode/starpod · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
---
import FormattedDate from '../components/FormattedDate';
import FullPlayButton from '../components/FullPlayButton';
import UFOIllustration from '../components/illustrations/UFOIllustration.astro';
import type { Episode, Show } from '../lib/rss';
import { dasherize } from '../utils/dasherize';

export interface Props {
  episodes: Array<Episode>;
  show: Show;
}

const { episodes, show } = Astro.props;
---

{
  episodes.length === 0 ? (
    <div class="flex flex-col items-center">
      <div class="h-auto w-full max-w-80">
        <UFOIllustration />
      </div>

      <p class="text-light-text-heading py-10 text-lg font-bold dark:text-white">
        No episodes yet. Check back soon!
      </p>
    </div>
  ) : (
    <ul aria-label="EpisodeList">
      {episodes.map((episode) => {
        return (
          <li class="dark:border-dark-border border-b">
            <div class="flex w-full flex-col py-12 lg:flex-row">
              <img
                alt={`${episode.title} - episode art`}
                aria-hidden="true"
                class="mb-3 block h-20 w-20 rounded-md lg:mr-6"
                height={80}
                loading="lazy"
                src={episode.episodeThumbnail ?? show.image}
                width={80}
              />

              <div class="flex flex-col">
                <FormattedDate date={new Date(episode.published)} />

                <h2 class="text-light-text-heading my-2 text-lg font-bold dark:text-white">
                  <a
                    href={`/${episode.episodeSlug}`}
                    style={
                      'view-transition-name: var(--should-vt); --vt-name: vt-' +
                      dasherize(episode.title)
                    }
                  >
                    {episode.episodeNumber}: {episode.title}
                  </a>
                </h2>

                <p class="mb-5">{episode.description}</p>

                <div class="flex items-center gap-6 text-sm">
                  <FullPlayButton
                    client:visible
                    episode={{
                      audio: episode.audio,
                      episodeNumber: episode.episodeNumber,
                      id: episode.id,
                      title: episode.title
                    }}
                  />

                  <a
                    class="text-light-text-heading font-bold dark:text-white"
                    href={`/${episode.episodeSlug}`}
                  >
                    Show notes
                  </a>
                </div>
              </div>
            </div>
          </li>
        );
      })}
    </ul>
  )
}