[Dashboard] Migrate MarkdownRenderer to shadcn+tailwind (#5502)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the `MarkdownRenderer` component by updating its styling and structure, as well as adding comprehensive Storybook stories for better documentation and testing.

### Detailed summary
- Replaced padding props with a `className` in `MarkdownRenderer`.
- Updated styles for `inline-code` component.
- Added Storybook stories for `MarkdownRenderer`, including examples and parameters for desktop and mobile views.
- Improved the structure of the `MarkdownRenderer` component, including class-based styling and code highlighting features.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/@/components/ui/inline-code.tsx

@@ -7,7 +7,7 @@ export function InlineCode({
   return (
     <code
       className={cn(
-        "inline-block rounded bg-muted px-2 font-mono text-sm",
+        "mx-0.5 inline rounded-lg border border-border px-1.5 py-[3px] font-mono text-[0.85em] text-foreground",
         className,
       )}
     >

apps/dashboard/src/components/contract-components/published-contract/index.tsx

@@ -131,10 +131,8 @@ export const PublishedContract: React.FC<PublishedContractProps> = ({
               <Divider />
 
               <MarkdownRenderer
-                px={6}
-                pt={2}
-                pb={5}
                 markdownText={publishedContract?.changelog}
+                className="px-6 pt-2 pb-5"
               />
             </Card>
           )}

apps/dashboard/src/components/contract-components/published-contract/markdown-renderer.stories.tsx

@@ -0,0 +1,160 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { mobileViewport } from "../../../stories/utils";
+import { MarkdownRenderer } from "./markdown-renderer";
+
+const meta = {
+  title: "blocks/MarkdownRenderer",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  args: {},
+};
+
+export const DisableCodeHighlight: Story = {
+  args: {
+    disableCodeHighlight: true,
+  },
+};
+
+export const Mobile: Story = {
+  args: {},
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+const markdownExample = `\
+# Heading 1
+## Heading 2
+### Heading 3
+#### Heading 4
+##### Heading 5
+###### Heading 6
+
+
+This a paragraph
+
+This is another paragraph
+
+This a very long paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec pur us. Donec euismod, nunc nec vehicula.
+ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec pur us. Donec euismod, nunc nec vehicula.
+
+
+## Empasis
+
+*Italic text*
+_Also italic text_
+
+**Bold text**
+__Also bold text__
+
+***Bold and italic***
+___Also bold and italic___
+
+## Blockquote
+> This is a blockquote.
+
+## Lists
+
+### Unordered list
+- Item 1
+- Item 2
+  - Nested Item 1
+  - Nested Item 2
+
+### Ordered list
+1. First item
+2. Second item
+   1. Sub-item 1
+   2. Sub-item 2
+
+### Mixed Nested lists
+
+- Item 1
+- Item 2
+  1. Sub-item 1
+  2. Sub-item 2
+
+
+1. First item
+2. Second item
+   - Sub-item 1
+   - Sub-item 2
+
+### Code
+This a a paragraph with some \`inlineCode()\`
+
+This a \`const longerCodeSnippet = "Example. This should be able to handle line breaks as well, it should not be overflowing the page";\`
+
+\`\`\`javascript
+// Code block with syntax highlighting
+function example() {
+  console.log("Hello, world!");
+}
+\`\`\`
+
+### Links
+[thirdweb](https://www.thirdweb.com)
+
+### Images
+![Alt text](https://picsum.photos/2000/500)
+
+
+### Horizontal Rule
+
+
+
+---
+
+
+
+### Tables
+| Header 1 | Header 2 | Header 3 |
+|----------|----------|----------|
+| Row 1    | Data     | More Data|
+| Row 2    | Data     | More Data|
+
+
+| Column 1     | Column 2         | Column 3     | Column 4         | Column 5     |
+|--------------|------------------|--------------|------------------|--------------|
+| Row 1 Cell 1 | Row 1 Cell 2     | Row 1 Cell 3 | Row 1 Cell 4     | Row 1 Cell 5 |
+| Row 2 Cell 1 | Row 2 Cell 2     | Row 2 Cell 3 | Row 2 Cell 4     | Row 2 Cell 5 |
+| Row 3 Cell 1 | Row 3 Cell 2     | Row 3 Cell 3 | Row 3 Cell 4     | Row 3 Cell 5 |
+| Row 4 Cell 1 | Row 4 Cell 2     | Row 4 Cell 3 | Row 4 Cell 4     | Row 4 Cell 5 |
+| Row 5 Cell 1 | Row 5 Cell 2     | Row 5 Cell 3 | Row 5 Cell 4     | Row 5 Cell 5 |
+
+
+### Task List
+- [ ] Task 1
+- [x] Task 2 (completed)
+
+### Escaping special characters
+\\*This text is not italicized.\\*
+
+### Strikethrough
+~~This is strikethrough text.~~
+
+
+`;
+
+function Story(props: {
+  disableCodeHighlight?: boolean;
+}) {
+  return (
+    <div className="container max-w-[800px] py-10">
+      <MarkdownRenderer
+        markdownText={markdownExample}
+        disableCodeHighlight={props.disableCodeHighlight}
+      />
+    </div>
+  );
+}