import styled from 'styled-components' ; import Spacer from 'components/core/Spacer/Spacer' ; import { Collection } from 'types/Collection' ; import { Fragment , useMemo } from 'react' ; import EmptyGallery from './EmptyGallery' ; import UserGalleryCollection from './UserGalleryCollection' ; type Props = { collections : Collection [ ] ; isAuthenticatedUsersPage : boolean ; } ; const COLLECTION_SPACING = 48 ; function UserGalleryCollections ( { collections , isAuthenticatedUsersPage } ) { const visibleCollections = useMemo ( ( ) => collections . filter ( ( collection ) => ! collection . hidden && collection . nfts . length > 0 ) , [ collections ] ) ; if ( visibleCollections . length === 0 ) { const emptyGalleryMessage = isAuthenticatedUsersPage ? 'Your gallery is empty. Display your NFTs by creating a collection.' : 'Curation in progress.' ; return < EmptyGallery message = { emptyGalleryMessage } />; } return ( < StyledUserGalleryCollections > { visibleCollections . map ( ( collection , index ) => ( < Fragment key = { collection . id } > < Spacer height = { COLLECTION_SPACING } / > < UserGalleryCollection collection = { collection } / > < Spacer height = { index === collections . length - 1 ? COLLECTION_SPACING : 0 } / > < /Fragment>))} < /StyledUserGalleryCollections>); } const StyledUserGalleryCollections = styled . div `
  width: 100%;
` ; export default UserGalleryCollections ;