feat(blog): add icon on blockquote

content/posts/draft-post/draft-post.mdx

@@ -632,6 +632,8 @@ inline math: $ x+1 = 2 $
 
 > This is a blockquote
 
+> **LONG BLOCKQUOTE** _Nisi est dolore magna laboris esse quis tempor laborum quis ipsum pariatur amet fugiat ipsum. Ad veniam qui enim nisi ut reprehenderit duis anim eu. Ex proident fugiat non duis consequat et officia et exercitation culpa reprehenderit eiusmod._
+
 # Separation
 
 ---

src/app/blog/post/[slug]/page.tsx

@@ -12,6 +12,7 @@ import {
   Warning,
   WarningOctagon
 } from '@phosphor-icons/react/dist/ssr'
+import { BiSolidQuoteAltRight } from 'react-icons/bi'
 import { Post, posts } from '#content'
 
 import { slug } from '~/lib/slug'
@@ -103,6 +104,14 @@ const mdxComponents = {
       </span>
       {children}
     </div>
+  ),
+  blockquote: ({ children, ...rest }: ComponentProps<'blockquote'>) => (
+    <blockquote {...rest}>
+      <span className="icon">
+        <BiSolidQuoteAltRight size="1em" />
+      </span>
+      {children}
+    </blockquote>
   )
 }
 

src/styles/components.css

@@ -117,9 +117,17 @@
     }
 
     blockquote {
-      @apply my-2 px-4;
+      @apply relative my-3 w-max max-w-full overflow-hidden px-4 py-1;
       @apply border-l border-l-neutral-900 dark:border-l-neutral-100;
       @apply italic text-black/80 dark:text-white/70;
+
+      p {
+        @apply m-0;
+      }
+
+      .icon {
+        @apply absolute inset-0 -z-20 flex items-center justify-end rounded-lg px-[5%] text-5xl opacity-10;
+      }
     }
 
     input[type='checkbox'] {