mastodon-glitch/app/javascript/mastodon/components/server_hero_image.tsx

36 lines
730 B
TypeScript
Raw Normal View History

2023-05-23 08:52:27 +00:00
import { useCallback, useState } from 'react';
import classNames from 'classnames';
import { Blurhash } from './blurhash';
interface Props {
src: string;
srcSet?: string;
blurhash?: string;
className?: string;
}
export const ServerHeroImage: React.FC<Props> = ({
src,
srcSet,
blurhash,
className,
}) => {
const [loaded, setLoaded] = useState(false);
const handleLoad = useCallback(() => {
setLoaded(true);
}, [setLoaded]);
return (
<div
className={classNames('image', { loaded }, className)}
role='presentation'
>
{blurhash && <Blurhash hash={blurhash} className='image__preview' />}
<img src={src} srcSet={srcSet} alt='' onLoad={handleLoad} />
</div>
);
};