import { useSetContentIsLoaded } from 'contexts/shimmer/ShimmerContext' ; import styled from 'styled-components' ; import { Nft } from 'types/Nft' ; import { useEffect } from 'react' ; type Props = { nft : Nft ; } ; declare global { namespace JSX { interface IntrinsicElements { 'model-viewer' : ModelViewerJSX & React . DetailedHTMLProps < React . HTMLAttributes < HTMLElement > , HTMLElement > ; } } } interface ModelViewerJSX { src : string ; poster ? : string ; class : string ; } function NftDetailModel ( { nft } ) { const setContentIsLoaded = useSetContentIsLoaded ( ) ; useEffect ( setContentIsLoaded , [ setContentIsLoaded ] ) ; return ( < StyledNftDetailModel > < model - viewer class = "model-viewer" auto - rotate camera - controls src = { nft . animation_url } / > < /StyledNftDetailModel>); } const StyledNftDetailModel = styled . div `
  width: 100%;
  height: 100%;
` ; export default NftDetailModel ;