1
0
Fork 0

chore: Add figcaptions:

This commit is contained in:
joostdecock 2024-10-06 13:27:08 +02:00
parent db63870415
commit a686383a85
2 changed files with 22 additions and 12 deletions

View file

@ -618,3 +618,10 @@ figure.develop.example div.develop {
.technique { .technique {
background: hsl(var(--pink-500)); background: hsl(var(--pink-500));
} }
figcaption.mdx {
font-style: italic;
margin-top: -0.5rem;
padding: 0 0.5rem;
font-size: 90%;
}

View file

@ -1,17 +1,20 @@
import React from 'react'; import React from 'react'
import clsx from 'clsx'; import clsx from 'clsx'
import styles from './styles.module.css'; import styles from './styles.module.css'
function transformImgClassName(className) { function transformImgClassName(className) {
return clsx(className, styles.img); return clsx(className, styles.img)
} }
export default function MDXImg(props) { export default function MDXImg(props) {
return (
// eslint-disable-next-line jsx-a11y/alt-text // eslint-disable-next-line jsx-a11y/alt-text
return (
<figure>
<img <img
decoding="async" decoding="async"
loading="lazy" loading="lazy"
{...props} {...props}
className={transformImgClassName(props.className)} className={transformImgClassName(props.className)}
/> />
); <figcaption className="mdx">{props.title}</figcaption>
</figure>
)
} }