From 52504a070f95886c0be721356a6ead56d902b2cd Mon Sep 17 00:00:00 2001
From: Stefan Imhoff <stefan@imhoff.name>
Date: Thu, 13 Apr 2023 14:57:54 +0200
Subject: [PATCH] feat: create Verse component

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

diff --git a/src/components/Verse.tsx b/src/components/Verse.tsx
new file mode 100644
index 0000000..70c736b
--- /dev/null
+++ b/src/components/Verse.tsx
@@ -0,0 +1,34 @@
+import cx from 'classnames';
+
+import type { ComponentChild, FunctionalComponent } from 'preact';
+
+interface Props {
+	class?: string;
+	children: ComponentChild;
+	variant?: 'center' | 'left';
+}
+
+export const Verse: FunctionalComponent<Props> = ({
+	class: className,
+	children,
+	variant = 'center',
+	...props
+}) => {
+	const classes = cx(
+		'flex italic [&_p]:mbe-0',
+		{
+			'm-10': variant === 'center',
+			'mbs-10 mbe-10 mis-0 mie-0': variant === 'left',
+		},
+		className
+	);
+	const preClasses = cx('font-sans mis-0 mie-0 whitespace-pre', {
+		'mbs-auto mbe-auto': variant === 'center',
+	});
+
+	return (
+		<blockquote class={classes} {...props}>
+			<pre class={preClasses}>{children}</pre>
+		</blockquote>
+	);
+};
diff --git a/src/components/index.ts b/src/components/index.ts
index 6e14f71..1786f83 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -11,3 +11,4 @@ export * from './Text';
 export * from './TextLink';
 export * from './Title';
 export * from './UnorderedList';
+export * from './Verse';
diff --git a/src/mdx-components.ts b/src/mdx-components.ts
index 247725e..ba72d7d 100644
--- a/src/mdx-components.ts
+++ b/src/mdx-components.ts
@@ -10,6 +10,7 @@ import {
 	TextLink,
 	Title,
 	UnorderedList,
+	Verse,
 } from './components';
 
 export const mapping = {
@@ -26,4 +27,5 @@ export const mapping = {
 	ol: OrderedList,
 	p: Text,
 	ul: UnorderedList,
+	Verse,
 };