import { useCallback , useEffect , useMemo , useState } from 'react' ; import styled from 'styled-components' ; import { Heading } from 'components/core/Text/Text' ; import { MembershipOwner } from 'types/MembershipTier' ; import GalleryLink from 'components/core/GalleryLink/GalleryLink' ; import breakpoints , { size } from 'components/core/breakpoints' ; import useDebounce from 'hooks/useDebounce' ; import { Directions } from 'src/components/core/enums' ; import MemberListGalleryPreview from './MemberListGalleryPreview' ; import detectMobileDevice from 'utils/detectMobileDevice' ; import { useBreakpoint } from 'hooks/useWindowSize' ; import colors from 'components/core/colors' ; type Props = { owner : MembershipOwner ; direction : Directions . LEFT | Directions . RIGHT ; setFadeUsernames : ( fadeUsernames : boolean ) => void ; } ; function MemberListOwner ( { owner , direction , setFadeUsernames } ) { const [ startFadeOut , setStartFadeOut ] = useState ( false ) ; const [ isHovering , setIsHovering ] = useState ( false ) ; const debouncedIsHovering = useDebounce ( isHovering , 150 ) ; const [ showPreview , setShowPreview ] = useState ( false ) ; useEffect ( ( ) => { if ( debouncedIsHovering ) { setShowPreview ( true ) ; return ; } if ( ! debouncedIsHovering && showPreview ) { setStartFadeOut ( true ) ; setTimeout ( ( ) => { setShowPreview ( false ) ; setStartFadeOut ( false ) ; } , 500 ) ; } } , [ debouncedIsHovering , showPreview ] ) ; const onMouseEnter = useCallback ( ( ) => { setIsHovering ( true ) ; setFadeUsernames ( true ) ; } , [ setFadeUsernames ] ) ; const onMouseLeave = useCallback ( ( ) => { setIsHovering ( false ) ; setFadeUsernames ( false ) ; } , [ setFadeUsernames ] ) ; const breakpoint = useBreakpoint ( ) ; const isDesktop = useMemo ( ( ) => breakpoint === size . desktop && ! detectMobileDevice ( ) , [ breakpoint ] ) ; return ( < StyledOwner > < StyledUsernameWrapper onMouseEnter = { onMouseEnter } onMouseLeave = { onMouseLeave } > < GalleryLink href = { `/${ owner . username }` } underlined = { false } > < StyledUsername > { owner . username } < /StyledUsername> < /GalleryLink> < /StyledUsernameWrapper> { isDesktop && showPreview && owner . preview_nfts && ( < MemberListGalleryPreview direction = { direction } nftUrls = { owner . preview_nfts } startFadeOut = { startFadeOut } / > ) } < /StyledOwner>); } const StyledOwner = styled . div `
  width: 50%;
  flex-shrink: 0;
  display: flex;

  @media only screen and ${ breakpoints . tablet } {
    width: 33%;
  }

  @media only screen and ${ breakpoints . desktop } {
    width: 25%;
  }

  &:hover {
    color: ${ colors . black }
  }
` ; const StyledUsernameWrapper = styled . div `
  max-width: 100%;
` ; const StyledUsername = styled ( Heading ) `
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 16px;
  color: inherit;
` ; export default MemberListOwner ;