feat: add Figure component

src/components/Figure.tsx

@@ -0,0 +1,35 @@
+import cx from 'classnames';
+
+import type { ComponentChild, FunctionalComponent } from 'preact';
+
+interface Props {
+	caption?: string;
+	children: ComponentChild;
+	class?: string;
+	size?: 'regular' | 'wide' | 'fullsize';
+}
+
+export const Figure: FunctionalComponent<Props> = ({
+	children,
+	class: className,
+	caption,
+	size = 'regular',
+	...props
+}) => {
+	const classes = cx(
+		'rounded-4 bg-white/50 p-10 mbe-13 mbs-0 mie-0 mis-0 dark:bg-black/80',
+		{ 'figure-wide': size === 'wide', 'figure-fullsize': size === 'fullsize' },
+		className
+	);
+
+	return (
+		<figure class={classes} {...props}>
+			<div>{children}</div>
+			{caption && (
+				<figcaption class="text-center text-2 mbs-2 [text-wrap:balance]">
+					{caption}
+				</figcaption>
+			)}
+		</figure>
+	);
+};

src/components/index.ts

@@ -8,6 +8,7 @@ export * from './ColorStack';
 export * from './ColorSwatch';
 export * from './DisplayBox';
 export * from './Divider';
+export * from './Figure';
 export * from './Flag';
 export * from './Headline';
 export * from './LegalDate';

src/mdx-components.ts

@@ -1,7 +1,9 @@
 import DownloadLink from './components/DownloadLink.astro';
 import EmailLink from './components/EmailLink.astro';
+import Image from './components/Image.astro';
 import MarkdownImage from './components/MarkdownImage.astro';
 import MoreLink from './components/MoreLink.astro';
+import Picture from './components/Picture.astro';
 import ThemeBox from './components/ThemeBox.astro';
 
 import {
@@ -15,6 +17,7 @@ import {
 	ColorSwatch,
 	DisplayBox,
 	Divider,
+	Figure,
 	Flag,
 	Headline,
 	ListItem,
@@ -39,8 +42,8 @@ export const mapping = {
 	AffiliateLink,
 	AmazonBook,
 	Banner,
-	blockquote: Blockquote,
 	Blockquote,
+	blockquote: Blockquote,
 	Book,
 	Bookshelf,
 	ColorStack,
@@ -48,6 +51,7 @@ export const mapping = {
 	DisplayBox,
 	DownloadLink,
 	EmailLink,
+	Figure,
 	Flag,
 	h1: Title,
 	h2: Headline,
@@ -56,13 +60,16 @@ export const mapping = {
 	h5: Subsubheadline,
 	h6: Subsubheadline,
 	hr: Divider,
+	Image,
 	img: MarkdownImage,
 	li: ListItem,
+	MarkdownImage,
 	MoreLink,
 	NetflixFlag,
 	OdyseeVideo,
 	ol: OrderedList,
 	p: Text,
+	Picture,
 	PrimeVideoFlag,
 	ProjectIntro,
 	Pullquote,