import React , { useEffect , useRef , useState } from 'react' ; import * as Styled from './ProjectDetailsSlide.styles' ; import TextCarousel from '../TextCarousel/TextCarousel' ; import { useIntersectionObserver } from '../../../hooks/useIntersectionObserver' ; import { ICarouselQuote } from '../../../types/portfolio' ; export interface Props { slideHeight : string ; slideBgColor : string ; projectMobileImg : string ; projectName : string ; projectQuotes : ICarouselQuote [ ] ; } function param { slideHeight } string param { slideBgColor } string returns { JSX . Element } const ProjectDetailsSlide = ( { slideHeight , slideBgColor , projectName , projectMobileImg , projectQuotes , } ) : JSX . Element => { const containerRef = useRef < HTMLDivElement > ( null ) ; const [ isElementVisible ] = useIntersectionObserver ( containerRef , { threshold : 0.5 , } ) ; const [ isOnScreen , setIsOnScreen ] = useState ( false ) ; useEffect ( ( ) => { if ( isElementVisible && ! isOnScreen ) setIsOnScreen ( true ) ; } , [ isElementVisible , isOnScreen ] ) ; const randomKey = `${ ~ ~ Math . random ( ) * 10000 }${ isOnScreen }` ; return ( < Styled . Container ref = { containerRef } key = { randomKey } slideHeight = { slideHeight } slideBgColor = { slideBgColor } > { isOnScreen && ( < > < Styled . RightColumn > < TextCarousel quotes = { projectQuotes } /> < /Styled.RightColumn> < Styled . LeftColumn > < Styled . LevitatingWrapper > < Styled . Figure > { [ 1 , 2 , 3 , 4 ] . map ( ( id ) => ( < img key = { id } src = { projectMobileImg } alt = { projectName } / > ) ) } < /Styled.Figure> < /Styled.LevitatingWrapper> < /Styled.LeftColumn> < />)} < /Styled.Container>); } ; export default ProjectDetailsSlide ;