import React from 'react' ; import cx from 'classnames' ; import _ from 'lodash' ; import { Dimmer , Loader } from 'semantic-ui-react' ; import { getThumbnail } from '../../utils' ; import Card from '../Card' ; import common from '../../common.scss' ; import styles from './styles.scss' ; type ArtistGridProps = { artists : { name : string ; } [ ] ; removeFavoriteArtist : ( artist ) => void ; onArtistClick : ( artist ) => void ; loading ? : boolean ; autoSize ? : boolean ; } ; export const ArtistGrid = ( { artists , onArtistClick , removeFavoriteArtist , loading , autoSize } ) => { return ( < div className = { cx ( common . nuclear , styles . artist_grid , { [ styles . loading ] : loading } , { [ styles . auto_size ] : autoSize && ! loading } ) } > < div className = { styles . artist_cards } > { ! loading && ! _ . isEmpty ( artists ) && artists . map ( ( artist , i ) => ( < Card key = { i } header = { artist . name } image = { getThumbnail ( artist ) } onClick = { ( ) => onArtistClick ( artist ) } withMenu = { removeFavoriteArtist ? true : false } menuEntries = { [ { type : 'item' , props : { children : 'Remove' , onClick : ( ) => removeFavoriteArtist ( artist ) } } ] } / > ) ) } < /div> { loading && < Dimmer active > < Loader /></Dimmer > } < /div>); } ; export default ArtistGrid ;