Koito/client/app/components/AlbumDisplay.tsx

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>
  );
}