Button.js
2 months ago
Checklist.js
2 months ago
Image.js
2 months ago
Link.js
2 months ago
List.js
2 months ago
Paragraph.js
2 months ago
RenderContent.js
2 months ago
Video.js
2 months ago
Image.js
24 lines
| 1 | import { useState } from 'react'; |
| 2 | import { Skeleton } from '@bsf/force-ui'; |
| 3 | |
| 4 | const Image = ( { src, alt } ) => { |
| 5 | const [ isLoaded, setIsLoaded ] = useState( false ); |
| 6 | |
| 7 | return ( |
| 8 | <div className="relative w-full shadow-sm rounded-lg overflow-hidden"> |
| 9 | { ! isLoaded && ( |
| 10 | <Skeleton className="w-full h-64" /> |
| 11 | ) } |
| 12 | <img |
| 13 | src={ src } |
| 14 | alt={ alt || '' } |
| 15 | decoding="async" |
| 16 | className={ `w-full h-auto border-0.5 border-solid border-border-subtle ${ isLoaded ? 'block' : 'hidden' }` } |
| 17 | onLoad={ () => setIsLoaded( true ) } |
| 18 | /> |
| 19 | </div> |
| 20 | ); |
| 21 | }; |
| 22 | |
| 23 | export default Image; |
| 24 |