From 5e2f177f4b430bec1878862ab0a287c5c3d2511a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20P=C4=99dzich?= <dnalop.me@gmail.com>
Date: Mon, 9 Jan 2023 23:42:44 +0100
Subject: [PATCH] Tweak styling of error message alerts

---
 src/layouts/PlaylistPageTab.astro                | 9 +++++++--
 src/pages/playlists/[playlistId]/snapshots.astro | 7 ++++++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/layouts/PlaylistPageTab.astro b/src/layouts/PlaylistPageTab.astro
index d9857ce..62d3d64 100644
--- a/src/layouts/PlaylistPageTab.astro
+++ b/src/layouts/PlaylistPageTab.astro
@@ -13,7 +13,12 @@ const { playlist, title, description } = Astro.props as Props;
 ---
 
 <BaseLayout title={title} description={description}>
-  <div class="mt-24 text-center flex flex-col gap-5 items-center">
+  <div
+    class:list={[
+      'text-center flex flex-col gap-5 items-center',
+      playlist ? 'mt-24' : 'w-screen h-screen justify-center'
+    ]}
+  >
   {
     playlist ? (
       <h1 class="font-bold text-4xl">
@@ -46,7 +51,7 @@ const { playlist, title, description } = Astro.props as Props;
       </div>
       <slot />
     ) : (
-    <div class="alert alert-error max-w-md justify-center shadow-lg">
+    <div class="alert alert-error max-w-xs justify-center shadow-lg">
       <span>{description}</span>
     </div>
     )
diff --git a/src/pages/playlists/[playlistId]/snapshots.astro b/src/pages/playlists/[playlistId]/snapshots.astro
index a95be58..a891ea9 100644
--- a/src/pages/playlists/[playlistId]/snapshots.astro
+++ b/src/pages/playlists/[playlistId]/snapshots.astro
@@ -1,10 +1,15 @@
 ---
 import PlaylistPageTab from '@/layouts/PlaylistPageTab.astro';
+import SnapshotCalendar from '@/components/vue/SnapshotCalendar.vue';
+
 import { getPlaylistLayoutProps } from '@/utils/getPlaylistLayoutProps';
 
 const layoutProps = await getPlaylistLayoutProps(Astro);
 ---
 
 <PlaylistPageTab {...layoutProps}>
-  <p class="text-lg">TODO: Implement snapshot calendar</p>
+  <p class="text-lg">
+    Click on a highlighted date to show a snapshot captured that day.
+  </p>
+  <SnapshotCalendar client:load />
 </PlaylistPageTab>