From 55244cd55b7e13ad684b9cf6f0ba1089e9681e03 Mon Sep 17 00:00:00 2001
From: Aaron Agarunov <agarunov.aaron@gmail.com>
Date: Fri, 31 May 2024 21:48:05 -0400
Subject: [PATCH] Create album card

---
 src/lib/globes/card.tsx  | 48 ++++++++++++++++++++++++++++++++++++++++
 src/lib/globes/globe.tsx |  2 +-
 2 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/globes/card.tsx

diff --git a/src/lib/globes/card.tsx b/src/lib/globes/card.tsx
new file mode 100644
index 0000000..530fc14
--- /dev/null
+++ b/src/lib/globes/card.tsx
@@ -0,0 +1,48 @@
+import { Album } from '@/types';
+import React from 'react';
+
+function randomInRange(min: number, max: number) {
+  return Math.random() * (max - min) + min;
+}
+
+export function AlbumCard({ album }: { album: Album }) {
+  const randomLeft = randomInRange(10, 80);
+  const randomTop = randomInRange(10, 50);
+
+  let tags = [album.description];
+  for (const location of album.locations) {
+    tags.push(location.description || '');
+  }
+  tags = tags.filter(Boolean) as string[];
+
+  return (
+    <aside
+      className={`p-4
+        absolute z-50
+        rounded-lg bg-gray-100 w-60 text-2xl opacity-50 flex flex-col
+        border border-gray-200
+        overflow-hidden`}
+      style={{
+        left: `calc(33% + ${randomLeft}px)`,
+        top: `calc(33% + ${randomTop}px)`
+      }}
+    >
+      <span className="blink rounded-lg">{album.title}</span>
+      <span className="text-base">{album.date}</span>
+      <div className="marquee py-4 text-xl">
+        <div className="marquee-content">
+          {tags.map(tag => (
+            <span key={`${tag}-1`}>{tag}</span>
+          ))}
+        </div>
+        <div className="marquee-content" aria-hidden={true}>
+          {tags.map(tag => (
+            <span key={`${tag}-2`}>{tag}</span>
+          ))}
+        </div>
+      </div>
+
+      <span>Click to enter &rarr;</span>
+    </aside>
+  );
+}
diff --git a/src/lib/globes/globe.tsx b/src/lib/globes/globe.tsx
index a761659..463b2e7 100644
--- a/src/lib/globes/globe.tsx
+++ b/src/lib/globes/globe.tsx
@@ -140,7 +140,7 @@ function useRings(
   function handleMouseLeave() {
     setPointAltitude(0.002);
 
-    // setActiveAlbumTitle(undefined);
+    setActiveAlbumTitle(undefined);
 
     globeElRef.pointOfView(
       {