feat: add Blockquote component

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>
+	);
+};

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';

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,

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;