markdown-content-demo

1"use client";
2 
3import { useState } from "react";
4import { MarkdownContent } from "@/registry/ui/markdown-content";
5 
6export default function MarkdownContentDemo() {
7	const [content] = useState(
8		`# Markdown Example
9 
10This is a sample paragraph that demonstrates how markdown content can be rendered in your application. It shows various markdown elements working together.
11 
12## Features List
13 
14- Clean and simple syntax
15- Support for headings and paragraphs
16- Bullet point lists
17- Easy to read and write
18- Customizable styling
19 
20## Text Formatting
21 
22You can make text **bold**, *italic*, or ***both***. You can also use ~~strikethrough~~ text.
23 
24### Links and Images
25 
26Here's a [link to GitHub](https://github.com) and below is a sample image:
27 
28![Markdown Logo](https://markdown-here.com/img/icon256.png)
29 
30### Code Examples
31 
32Inline code: \`const greeting = "Hello World!"\`
33 
34#### Code Block	
35 
36\`\`\`javascript
37// Code block
38function sayHello() {
39  console.log("Hello!");
40}
41\`\`\`
42 
43### Blockquotes
44 
45> This is a blockquote
46> It can span multiple lines
47>> And can be nested
48 
49### Tables
50 
51| Header 1 | Header 2 | Header 3 |
52|----------|----------|----------|
53| Row 1    | Data     | Data     |
54| Row 2    | Data     | Data     |
55 
56### Task Lists
57 
58- [x] Completed task
59- [ ] Pending task
60- [ ] Another task
61 
62### Horizontal Rule
63 
64---
65 
66### Ordered List
67 
681. First item
692. Second item
703. Third item
71   1. Sub-item 1
72   2. Sub-item 2
73`,
74	);
75	return (
76		<div className="w-full max-h-[400px] overflow-y-auto">
77			<MarkdownContent content={content} />
78		</div>
79	);
80}