From f2b5945f64dd37cff9cc0468588c36b3992015c2 Mon Sep 17 00:00:00 2001
From: Jorge Vargas <jorgev259@outlook.es>
Date: Sun, 16 Feb 2025 00:40:05 -0600
Subject: [PATCH] Implement AlbumBox component

---
 src/components/AlbumBox.astro | 44 +++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 src/components/AlbumBox.astro

diff --git a/src/components/AlbumBox.astro b/src/components/AlbumBox.astro
new file mode 100644
index 0000000..d305d74
--- /dev/null
+++ b/src/components/AlbumBox.astro
@@ -0,0 +1,44 @@
+---
+import { Image } from 'astro:assets'
+
+type Props =
+  | { title: string; href: string; image: string; loading?: false }
+  | { title?: string; href?: string; image?: string; loading: true }
+
+const { props } = Astro
+const { title, href, image, loading = false } = props
+---
+
+<a
+  href={href}
+  class:list={['block w-full mt-2.5 rounded-md bg-dark ', loading ? 'cursor-default' : 'hover:bg-dark-hover group']}
+>
+  {
+    loading ? (
+      <div class='pt-2.5'>
+        <div class='rounded animate-pulse bg-gray size-40 mx-auto' />
+      </div>
+    ) : (
+      <Image
+        src={`https://cdn.sittingonclouds.net/${image}`}
+        alt={`${title} cover`}
+        inferSize
+        quality='low'
+        class='rounded-md scale-95 group-hover:scale-100 transition-transform'
+      />
+    )
+  }
+
+  {
+    loading ? (
+      <div class='animate-pulse p-2.5 px-4'>
+        <div class='space-y-3'>
+          <div class='h-2 rounded bg-gray' />
+          <div class='h-2 rounded bg-gray' />
+        </div>
+      </div>
+    ) : (
+      <div class='group-hover:text-hover-link group-hover:underline text-base font-bold p-1 text-center'>{title}</div>
+    )
+  }
+</a>