add: new blog post (#42)

* add: new blog post

Author: jsantanders

components/markdown.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import {
+	Blockquote,
 	Callout,
 	Code,
 	ConsCard,
@@ -69,6 +70,7 @@ export const Markdown = ({ code, markdownLocales, slug }: Props) => {
 			<Preformatted {...props} locales={markdownLocales.codeLocales} />
 		),
 		div: Division as React.FC,
+		blockquote: Blockquote as React.FC,
 		Tweet: (props: React.ComponentProps<typeof Tweet>) => <Tweet {...props} />,
 		Callout,
 		ProsCard,

components/mdx/blockqoute.tsx

@@ -0,0 +1,7 @@
+export const Blockquote: React.FC<React.HTMLAttributes<HTMLQuoteElement>> = (
+	props,
+) => {
+	return (
+		<blockquote className="my-8 border-l-4 border-gray-300 pl-4" {...props} />
+	);
+};

components/mdx/index.ts

@@ -1,3 +1,4 @@
+import { Blockquote } from "./blockqoute";
 import { Callout } from "./callout";
 import { Code } from "./code";
 import { ConsCard } from "./cons-card";
@@ -14,18 +15,19 @@ import { TextLink } from "./text-link";
 import { Tweet } from "./tweet";
 
 export {
-	ProsCard,
+	Blockquote,
+	Callout,
+	Code,
 	ConsCard,
-	Paragraph,
-	Tweet,
+	Division,
 	Heading,
 	List,
 	ListItem,
+	Mafs,
 	MarkdownImage,
-	TextLink,
-	Code,
+	Paragraph,
 	Preformatted,
-	Division,
-	Callout,
-	Mafs,
+	ProsCard,
+	TextLink,
+	Tweet,
 };

components/mdx/list-item.tsx

@@ -22,7 +22,7 @@ export const ListItem: React.FC<ListItemProps> = ({ children, ...props }) => {
 		<li ref={listRef} className="flex flex-row items-baseline" {...rest}>
 			{type === "ul" && (
 				<span
-					className="min-w-20 translate-y-1 transform text-secondary pr-3"
+					className="translate-y-1 transform text-secondary pr-2"
 					aria-hidden
 				>
 					<ArrowRight width={18} height={18} />