25 lines
849 B
JavaScript
25 lines
849 B
JavaScript
import { Popout } from 'shared/components/popout/index.mjs'
|
|
import { Lightbox } from 'shared/components/lightbox.mjs'
|
|
import { ImageWrapper } from 'shared/components/wrappers/img.mjs'
|
|
|
|
export const Figure = (props) => {
|
|
const title = props?.title ? props.title : props?.alt ? props.alt : false
|
|
|
|
return (
|
|
<figure className="block my-4">
|
|
<Lightbox>
|
|
<ImageWrapper>
|
|
<img src={props?.src} alt={props?.alt || ''} title={title || ''} className="m-auto" />
|
|
</ImageWrapper>
|
|
{title ? (
|
|
<figcaption className="text-center italic mt-1">{title}</figcaption>
|
|
) : (
|
|
<Popout fixme>
|
|
<h5>This image does not have an alt of title specified</h5>
|
|
<p>Please improve our documentation and fix this.</p>
|
|
</Popout>
|
|
)}
|
|
</Lightbox>
|
|
</figure>
|
|
)
|
|
}
|