muse/web/components/artist-view.tsx

"use client";

import * as React from "react";
import { motion } from "framer-motion";
import { api, type AlbumCard, type ArtistHeader, type Track } from "@/lib/api";
import { tint } from "@/lib/colour";
import { Hero } from "@/components/hero";
import { TrackRow } from "@/components/track-row";
import { Skeletons } from "@/components/skeletons";

export function ArtistView({
  id,
  onAlbum,
  onQueued,
}: {
  id: number;
  onAlbum: (id: number) => void;
  onQueued?: () => void;
}) {
  const [data, setData] = React.useState<{
    artist: ArtistHeader;
    tracks: Track[];
    albums: AlbumCard[];
  } | null>(null);
  const [err, setErr] = React.useState<string | null>(null);

  React.useEffect(() => {
    let live = true;
    setData(null);
    setErr(null);
    api
      .artist(id)
      .then((d) => {
        if (!live) return;
        setData(d);
        void tint(d.artist.picture);
      })
      .catch((e) => live && setErr((e as Error).message));
    return () => {
      live = false;
    };
  }, [id]);

  if (err) return <div className="py-12 text-center text-dim">Could not load artist: {err}</div>;
  if (!data) return <Skeletons n={8} />;

  const { artist, tracks, albums } = data;

  return (
    <>
      <Hero
        kind="Artist"
        title={artist.name}
        art={artist.picture}
        round
        facts={[
          artist.nb_fan ? `${artist.nb_fan.toLocaleString()} fans` : null,
          artist.nb_album ? `${artist.nb_album} releases` : null,
        ]}
      />

      <SectionHead>Top tracks</SectionHead>
      <motion.div layout className="flex flex-col gap-[7px]">
        {tracks.map((t, i) => (
          <TrackRow
            key={t.deezer_id}
            track={t}
            index={i}
            showArtist={false}
            onAlbum={onAlbum}
            onQueued={onQueued}
          />
        ))}
      </motion.div>

      {albums.length > 0 && (
        <>
          <SectionHead>Releases</SectionHead>
          <div className="grid grid-cols-[repeat(auto-fill,minmax(136px,1fr))] gap-3.5">
            {albums.map((a, i) => (
              <motion.button
                key={a.album_id}
                initial={{ opacity: 0, y: 12 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: Math.min(i * 0.025, 0.5) }}
                whileHover={{ y: -4 }}
                onClick={() => onAlbum(a.album_id)}
                className="cursor-pointer text-left"
              >
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src={a.cover ?? ""}
                  alt=""
                  loading="lazy"
                  className="mb-2 aspect-square w-full rounded-[13px] bg-faint object-cover
                             shadow-[0_8px_24px_rgb(0_0_0/0.35)]"
                  onError={(e) => (e.currentTarget.style.visibility = "hidden")}
                />
                <div className="text-[13.5px] font-medium clamp1">{a.title}</div>
                <div className="text-xs text-dim clamp1">
                  {[a.year, a.record_type].filter(Boolean).join(" · ")}
                </div>
              </motion.button>
            ))}
          </div>
        </>
      )}
    </>
  );
}

function SectionHead({ children }: { children: React.ReactNode }) {
  return (
    <h3 className="mt-6 mb-3 text-xs font-bold uppercase tracking-[0.9px] text-dim">
      {children}
    </h3>
  );
}