import { OutgoingLink } from '@47ng/chakra-next' ; import { Box , BoxProps , Image , useColorModeValue } from '@chakra-ui/react' ; import styled from '@emotion/styled' ; import Head from 'next/head' ; import React from 'react' ; import { FiPlay } from 'react-icons/fi' ; export interface SpotifyAlbumData { name : string ; url : string ; artist : { name : string ; url : string ; } ; cover : { src : string ; } ; } export interface SpotifyAlbumProps extends BoxProps , SpotifyAlbumData { uri : string ; by ? : string ; } const Overlay = styled ( Box ) `
  opacity: 0;
  transition: opacity 0.1s ease-out;
  .album-cover:hover &,
  a:focus > .album-cover & {
    opacity: 1;
  }
  & .svg {
    stroke-width: 0;
    fill: white;
  }

  @media (prefers-reduced-motion) {
    .album-cover:hover &,
    a:focus > .album-cover & {
      opacity: 0;
    }
  }
` ; const AlbumCover = styled ( Box ) `
  &:hover img {
    filter: blur(3px);
  }
  transition: all 0.1s ease-out;
  & img {
    transition: filter 0.1s ease-out;
  }
  @media (prefers-reduced-motion) {
    &:hover img {
      filter: none;
    }
    transition: none;
    & img {
      transition: none;
    }
  }
` ; export const SpotifyAlbum = ( { uri , name , artist , cover , url , by = artist . name , ... props } ) => { return ( < > < Head > < link key = "spotify-preconnect" rel = "preconnect" href = "https://i.scdn.co" / > < link key = "spotify-prefetch" rel = "dns-prefetch" href = "https://i.scdn.co" / > < /Head> < Box as = "figure" { ... props } > < OutgoingLink href = { url } bg = "red.100" > < AlbumCover className = "album-cover" rounded = "md" shadow = "md" h = "250px" w = "250px" mx = "auto" overflow = "hidden" display = "flex" justifyContent = "center" alignItems = "center" bg = "black" fontSize = "xs" _hover = { { shadow : 'lg' } } position = "relative" > < Image src = { cover . src } fallbackSrc = "/images/album-cover-placeholder.jpg" alt = { `${ name }, an album by ${ by }` } /> < Overlay bg = "rgba(0,0,0,0.3)" position = "absolute" left = { 0 } right = { 0 } top = { 0 } bottom = { 0 } zIndex = { 1 } d = "flex" justifyContent = "center" alignItems = "center" > < Box as = { FiPlay } role = "img" aria - hidden color = "white" w = "20%" h = "20%" className = "svg" / > < /Overlay> < /AlbumCover> < /OutgoingLink> < Box as = "figcaption" textAlign = "center" color = { useColorModeValue ( 'gray.600' , 'gray.500' ) } fontSize = "sm" mt = { 2 } > < OutgoingLink href = { url } > { name } < /OutgoingLink> { ' - ' } < OutgoingLink href = { artist . url } > { by } < /OutgoingLink> < /Box> < /Box> < />); } ;