Add no episodes placeholder (#39)

* Initial plan

* Add no episodes placeholder to EpisodeList component

Co-authored-by: argyleink <1134620+argyleink@users.noreply.github.com>

* Use UFOIllustration for no episodes placeholder

Co-authored-by: RobbieTheWagner <2640861+RobbieTheWagner@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: argyleink <1134620+argyleink@users.noreply.github.com>
Co-authored-by: RobbieTheWagner <2640861+RobbieTheWagner@users.noreply.github.com>

Author: 3 people

src/components/EpisodeList.astro

@@ -1,6 +1,7 @@
 ---
 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';
 
@@ -12,61 +13,73 @@ export interface Props {
 const { episodes, show } = Astro.props;
 ---
 
-<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}
-            />
+{
+  episodes.length === 0 ? (
+    <div class="flex flex-col items-center">
+      <div class="h-auto w-full max-w-80">
+        <UFOIllustration />
+      </div>
 
-            <div class="flex flex-col">
-              <FormattedDate date={new Date(episode.published)} />
+      <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}
+              />
 
-              <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>
+              <div class="flex flex-col">
+                <FormattedDate date={new Date(episode.published)} />
 
-              <p class="mb-5">{episode.description}</p>
+                <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>
 
-              <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
-                  }}
-                />
+                <p class="mb-5">{episode.description}</p>
 
-                <a
-                  class="text-light-text-heading font-bold dark:text-white"
-                  href={`/${episode.episodeSlug}`}
-                >
-                  Show notes
-                </a>
+                <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>
-          </div>
-        </li>
-      );
-    })
-  }
-</ul>
+          </li>
+        );
+      })}
+    </ul>
+  )
+}