From 89bead4db39be0aabd98e6358885eab3baf8ab1f Mon Sep 17 00:00:00 2001
From: Stefan Imhoff <stefan@imhoff.name>
Date: Thu, 1 Jun 2023 11:56:31 +0200
Subject: [PATCH] feat: add Blockquote component

---
 src/components/Blockquote.tsx | 50 +++++++++++++++++++++++++++++++++++
 src/components/index.ts       |  1 +
 src/mdx-components.ts         |  3 +++
 src/styles/global.css         | 29 ++++++++++++++++++++
 4 files changed, 83 insertions(+)
 create mode 100644 src/components/Blockquote.tsx

diff --git a/src/components/Blockquote.tsx b/src/components/Blockquote.tsx
new file mode 100644
index 0000000..15584c8
--- /dev/null
+++ b/src/components/Blockquote.tsx
@@ -0,0 +1,50 @@
+import cx from 'classnames';
+
+import type { ComponentChild, FunctionalComponent, JSX } from 'preact';
+
+import { TextLink } from '.';
+
+interface Props extends JSX.HTMLAttributes<HTMLQuoteElement> {
+	author?: string;
+	children: ComponentChild;
+	class?: string;
+	lang?: string;
+	source?: string;
+	sourceUrl?: string;
+}
+
+export const Blockquote: FunctionalComponent<Props> = ({
+	author,
+	children,
+	class: className,
+	lang = 'en',
+	source,
+	sourceUrl,
+	...props
+}) => {
+	const classes = cx(
+		'relative overflow-hidden mbe-12 mbs-12 mie-8 mis-8 pie-8 pis-8 md:mie-10 md:mis-10',
+		className
+	);
+
+	return (
+		<blockquote lang={lang} class={classes} {...props}>
+			{children}
+			{(author || source) && (
+				<footer class="text-2 font-normal opacity-60 mbs-6">
+					{(author || source) && '—'}
+					{author && <b class="font-normal">{author}</b>}
+					{author && source && ', '}
+					{source &&
+						(sourceUrl ? (
+							<cite>
+								<TextLink href={sourceUrl}>{source}</TextLink>
+							</cite>
+						) : (
+							<cite>{source}</cite>
+						))}
+				</footer>
+			)}
+		</blockquote>
+	);
+};
diff --git a/src/components/index.ts b/src/components/index.ts
index ff6e739..b4febc0 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,6 +1,7 @@
 export * from './AffiliateLink';
 export * from './AmazonBook';
 export * from './Banner';
+export * from './Blockquote';
 export * from './Book';
 export * from './ColorStack';
 export * from './ColorSwatch';
diff --git a/src/mdx-components.ts b/src/mdx-components.ts
index 39fd160..66f0fb1 100644
--- a/src/mdx-components.ts
+++ b/src/mdx-components.ts
@@ -8,6 +8,7 @@ import {
 	AffiliateLink,
 	AmazonBook,
 	Banner,
+	Blockquote,
 	Book,
 	ColorStack,
 	ColorSwatch,
@@ -37,6 +38,8 @@ export const mapping = {
 	AffiliateLink,
 	AmazonBook,
 	Banner,
+	blockquote: Blockquote,
+	Blockquote,
 	Book,
 	ColorStack,
 	ColorSwatch,
diff --git a/src/styles/global.css b/src/styles/global.css
index ae2f1ce..86394a8 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -81,6 +81,35 @@
 		quotes: '「' '」' '『' '』';
 	}
 
+	/** Blockquote */
+	blockquote {
+		& p,
+		& ul,
+		& ol {
+			@apply text-3 font-extralight italic opacity-60 !mbe-8 mbs-0;
+		}
+
+		& p:last-child {
+			@apply !mbe-0;
+		}
+
+		& > footer {
+			@apply !-mbs-5;
+		}
+
+		&:nth-last-child(2) {
+			@apply mbe-5;
+		}
+
+		& strong {
+			@apply font-bold italic;
+		}
+
+		& sup {
+			@apply font-normal;
+		}
+	}
+
 	/** Inline Quotes */
 	q {
 		@apply italic;