feat: add Banner component

src/components/Banner.tsx

@@ -0,0 +1,34 @@
+import cx from 'classnames';
+
+import type { ComponentChild, FunctionalComponent } from 'preact';
+
+interface Props {
+	class?: string;
+	children: ComponentChild;
+	summary: string;
+	open?: boolean;
+}
+
+export const Banner: FunctionalComponent<Props> = ({
+	class: className,
+	children,
+	open,
+	summary,
+	...props
+}) => {
+	const classes = cx(
+		'rounded-2 bg-black/5 p-10 mbe-10 dark:bg-white/5 [&_p:last-of-type]:mbe-0',
+		className
+	);
+
+	return (
+		<aside class={classes} {...props}>
+			<details open={open} class="group">
+				<summary class="cursor-pointer font-black leading-4 tracking-tight group-open:mbe-8">
+					{summary}
+				</summary>
+				{children}
+			</details>
+		</aside>
+	);
+};

src/components/index.ts

@@ -1,5 +1,6 @@
 export * from './AffiliateLink';
 export * from './AmazonBook';
+export * from './Banner';
 export * from './Book';
 export * from './ColorSwatch';
 export * from './Divider';

src/mdx-components.ts

@@ -22,6 +22,7 @@ export const mapping = {
 	AffiliateLink,
 	AmazonBook,
 	Book,
+	Banner,
 	ColorSwatch,
 	h1: Title,
 	h2: Headline,