chore: initial public commit

client/app/components/AlbumDisplay.tsx

@@ -0,0 +1,25 @@
+import { imageUrl, type Album } from "api/api";
+import { Link } from "react-router";
+
+interface Props {
+    album: Album 
+    size: number
+}
+
+export default function AlbumDisplay({ album, size }: Props) {
+    return (
+        <div className="flex gap-3" key={album.id}>
+            <div>
+                <Link to={`/album/${album.id}`}>
+                <img src={imageUrl(album.image, "large")} alt={album.title} style={{width: size}}/>
+                </Link>
+            </div>
+            <div className="flex flex-col items-start" style={{width: size}}>
+                <Link to={`/album/${album.id}`} className="hover:text-(--color-fg-secondary)">
+                <h4>{album.title}</h4>
+                </Link>
+                <p className="color-fg-secondary">{album.listen_count} plays</p>
+            </div>
+        </div>
+    )
+}