MDXImage.tsx
For the full content of this gist, refer to https://gist.github.com/CodingAbdullah/d1fa1916c6cdf89d6f99d64a4c2186a6
McMaster. Software Engineer with a keen interest in blockchain and web3.
import Image from "next/image";
import MDXImageType from "@/utils/types/MDXImageType";
// MDXImage custom component
// Utilizes the built-in Next.js Image component as well as the figcaption element
export default function MDXImage(imageProperties: MDXImageType) {
return (
<figure className='text-center'>
<Image
className='mx-auto'
src={imageProperties.src}
height={imageProperties.height}
width={imageProperties.width}
alt={imageProperties.alt}
/>
<figcaption className="mb-4 leading-relaxed text-green-200/90">
{imageProperties.figcaption}
</figcaption>
</figure>
)
}