initial commit

components/mdx/ImageWrapper.tsx

@@ -0,0 +1,12 @@
+// Unlike other mdx elements, it does not receive the converted img tag,
+// but all the attributes of the img tag.
+const ImageWrapper = (props: JSX.IntrinsicElements["img"]) => {
+  return (
+    <div className="flex flex-col my-5">
+      <img alt={props.alt} className="mx-auto my-0" src={props.src} />
+      <div className="mx-auto my-1 text-sm text-gray-500 dark:text-gray-300">{props.alt}</div>
+    </div>
+  );
+};
+
+export default ImageWrapper;