albert.lol/src/components/SpotifyCard.tsx

import { truncate } from '@/utils/truncate';
import FadeIn from 'react-fade-in';
import Image from 'next/image';
import useSWR from 'swr';
import SongImage from '@/public/song.webp';
import Link from 'next/link';

export const fetcher = (url: RequestInfo) => fetch(url).then((r) => r.json());

export const NowPlayingCard = () => {
  var { data: spotify } = useSWR('/api/spotify', fetcher, {
    refreshInterval: 3000,
    fallbackData: 'loading',
  });

  return (
    <FadeIn>
      <div className='mt-5 focus:outline-none transition duration-300 ease-in-out transform hover:scale-105 p-3 rounded-md border border-gray-800 shadow flex flex-row max-w-sm'>
        {spotify.song ? (
          <Image
            height={45}
            width={45}
            alt='Song cover art'
            src={spotify.song?.image}
          />
        ) : (
          <Image height={45} width={45} alt='Song cover art' src={SongImage} />
        )}
        <div className='my-auto ml-4'>
          <div className='font-semibold text-l sm:text-regular'>
            Listening to{' '}
            {spotify.song ? (
              <Link
                href={`${spotify.song.url}`}
                target='_blank'
                className='text-[#32a866]'
              >
                {truncate(`${spotify.song.title}`, 20)}
              </Link>
            ) : (
              <span className='text-[#32a866]'>nothing</span>
            )}
          </div>
        </div>
      </div>
    </FadeIn>
  );
};