import React from 'react' ; import { getBlockIcon , getBlockTitle } from 'notion-utils' ; import { Block , PageBlock , CalloutBlock } from 'notion-types' ; import { cs , isUrl } from '../utils' ; import { DefaultPageIcon } from '../icons/default-page-icon' ; import { useNotionContext } from '../context' ; import { GracefulImage } from './graceful-image' ; const isIconBlock = ( value ) : value is PageBlock | CalloutBlock => { return ( value . type === 'page' || value . type === 'callout' || value . type === 'collection_view' || value . type === 'collection_view_page' ) ; } ; export const PageIcon = ( { block , className , hideDefaultIcon = false , defaultIcon } ) => { const { mapImageUrl , recordMap } = useNotionContext ( ) ; if ( ! isIconBlock ( block ) ) { return null ; } const icon = getBlockIcon ( block , recordMap ) ?? defaultIcon ; const title = getBlockTitle ( block , recordMap ) ; if ( icon && isUrl ( icon ) ) { const url = mapImageUrl ( icon , block ) ; return ( < GracefulImage className = { cs ( className , 'notion-page-icon' ) } src = { url } alt = { title ? title : 'Icon' } loading = 'lazy' / > ) ; } else { const iconValue = icon ?. trim ( ) ; if ( ! iconValue ) { if ( hideDefaultIcon ) { return null ; } return ( < DefaultPageIcon className = { cs ( className , 'notion-page-icon' ) } alt = { title ? title : 'Page' } / > ) ; } return ( < span className = { cs ( className , 'notion-page-icon' ) } role = 'img' aria - label = { icon } > { iconValue } < /span>); } } ;