chore: Add figcaptions:
This commit is contained in:
parent
db63870415
commit
a686383a85
2 changed files with 22 additions and 12 deletions
|
@ -618,3 +618,10 @@ figure.develop.example div.develop {
|
|||
.technique {
|
||||
background: hsl(var(--pink-500));
|
||||
}
|
||||
|
||||
figcaption.mdx {
|
||||
font-style: italic;
|
||||
margin-top: -0.5rem;
|
||||
padding: 0 0.5rem;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
|
|
@ -1,17 +1,20 @@
|
|||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import styles from './styles.module.css';
|
||||
import React from 'react'
|
||||
import clsx from 'clsx'
|
||||
import styles from './styles.module.css'
|
||||
function transformImgClassName(className) {
|
||||
return clsx(className, styles.img);
|
||||
return clsx(className, styles.img)
|
||||
}
|
||||
export default function MDXImg(props) {
|
||||
// eslint-disable-next-line jsx-a11y/alt-text
|
||||
return (
|
||||
// eslint-disable-next-line jsx-a11y/alt-text
|
||||
<img
|
||||
decoding="async"
|
||||
loading="lazy"
|
||||
{...props}
|
||||
className={transformImgClassName(props.className)}
|
||||
/>
|
||||
);
|
||||
<figure>
|
||||
<img
|
||||
decoding="async"
|
||||
loading="lazy"
|
||||
{...props}
|
||||
className={transformImgClassName(props.className)}
|
||||
/>
|
||||
<figcaption className="mdx">{props.title}</figcaption>
|
||||
</figure>
|
||||
)
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue