From 8cfbffe58175f21d17456272aac768ad5ba5064f Mon Sep 17 00:00:00 2001
From: Stefan Imhoff <stefan@imhoff.name>
Date: Sun, 23 Apr 2023 15:31:11 +0200
Subject: [PATCH] feat: add Banner component

---
 src/components/Banner.tsx | 34 ++++++++++++++++++++++++++++++++++
 src/components/index.ts   |  1 +
 src/mdx-components.ts     |  1 +
 3 files changed, 36 insertions(+)
 create mode 100644 src/components/Banner.tsx

diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
new file mode 100644
index 0000000..b7b52ec
--- /dev/null
+++ b/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>
+	);
+};
diff --git a/src/components/index.ts b/src/components/index.ts
index c6bc25d..544ae23 100644
--- a/src/components/index.ts
+++ b/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';
diff --git a/src/mdx-components.ts b/src/mdx-components.ts
index 79ab35c..53b8e1f 100644
--- a/src/mdx-components.ts
+++ b/src/mdx-components.ts
@@ -22,6 +22,7 @@ export const mapping = {
 	AffiliateLink,
 	AmazonBook,
 	Book,
+	Banner,
 	ColorSwatch,
 	h1: Title,
 	h2: Headline,