[#200] Blog: implement Blockquote component

apps/blog/src/components/Blockquote/Blockquote.tsx

@@ -0,0 +1,8 @@
+export function Blockquote(props: React.BlockquoteHTMLAttributes<HTMLQuoteElement>) {
+  return (
+    <blockquote
+      className="relative border-none font-semibold not-italic pl-[2.5em] lg:pl-[2em] before:content-quote before:absolute before:left-[0]"
+      {...props}
+    />
+  )
+}

apps/blog/src/components/Blockquote/index.ts

@@ -0,0 +1 @@
+export { Blockquote } from './Blockquote'

apps/blog/src/components/Mdx/Mdx.tsx

@@ -3,12 +3,13 @@ import Image from 'next/image'
 import { useMDXComponent } from 'next-contentlayer/hooks'
 import InstagramPost from '../InstagramPost'
 import { ExternalLink } from '../ExternalLink'
+import { Blockquote } from '../Blockquote'
 
 interface MdxProps {
   code: string
 }
 
-const components = { Image: (props: ImageProps) => <Image {...props} />, InstagramPost, a: ExternalLink }
+const components = { Image: (props: ImageProps) => <Image {...props} />, InstagramPost, a: ExternalLink, blockquote: Blockquote }
 
 export function Mdx({ code }: MdxProps) {
   const Component = useMDXComponent(code)

apps/blog/tailwind.config.js

@@ -44,11 +44,14 @@ module.exports = {
       },
       content: {
         externalLink: 'url("../../assets/ext-link-icon.svg")',
+        quote: 'url("../../assets/quote.svg")',
       },
       typography: {
         DEFAULT: {
           css: {
-            blockquote: { quotes: 'auto' },
+            blockquote: {
+              quotes: 'auto',
+            },
           },
         },
       },