61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
|
|
interface SimpleMarkdownRendererProps {
|
|
content: string;
|
|
}
|
|
|
|
const SimpleMarkdownRenderer: React.FC<SimpleMarkdownRendererProps> = ({ content }) => {
|
|
// Convert markdown to HTML with basic formatting
|
|
const formatContent = (text: string) => {
|
|
return (
|
|
text
|
|
// Headers
|
|
.replace(
|
|
/^### (.*$)/gm,
|
|
'<h3 class="text-xl font-bold mb-3 mt-6 text-gray-900">$1</h3>',
|
|
)
|
|
.replace(
|
|
/^## (.*$)/gm,
|
|
'<h2 class="text-2xl font-bold mb-4 mt-8 text-gray-900">$1</h2>',
|
|
)
|
|
.replace(
|
|
/^# (.*$)/gm,
|
|
'<h1 class="text-3xl font-bold mb-6 mt-8 text-gray-900">$1</h1>',
|
|
)
|
|
|
|
// Bold text
|
|
.replace(
|
|
/\*\*(.*?)\*\*/g,
|
|
'<strong class="font-semibold text-gray-900">$1</strong>',
|
|
)
|
|
|
|
// Italic text
|
|
.replace(/\*(.*?)\*/g, '<em class="italic">$1</em>')
|
|
|
|
// Lists
|
|
.replace(/^\- (.*$)/gm, '<li class="mb-2 ml-4">• $1</li>')
|
|
|
|
// Line breaks
|
|
.replace(/\n\n/g, '</p><p class="mb-4 text-gray-700 leading-relaxed">')
|
|
.replace(/\n/g, '<br>')
|
|
|
|
// Wrap in paragraphs
|
|
.replace(/^(?!<[h|l])/gm, '<p class="mb-4 text-gray-700 leading-relaxed">')
|
|
|
|
// Clean up
|
|
.replace(/<p class="mb-4 text-gray-700 leading-relaxed"><\/p>/g, '')
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="prose prose-lg max-w-none"
|
|
dangerouslySetInnerHTML={{ __html: formatContent(content) }}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default SimpleMarkdownRenderer;
|