| "use client"; |
|
|
| import ReactMarkdown from "react-markdown"; |
|
|
| export function Markdown({ children }: { children: string }) { |
| |
| |
| const processed = children.replace(/\| \|/g, '|\n|'); |
|
|
| return ( |
| <div className="prose-custom"> |
| <ReactMarkdown |
| components={{ |
| table: ({ children }) => ( |
| <table className="gp-table">{children}</table> |
| ), |
| thead: ({ children }) => ( |
| <thead>{children}</thead> |
| ), |
| tbody: ({ children }) => ( |
| <tbody>{children}</tbody> |
| ), |
| tr: ({ children }) => ( |
| <tr>{children}</tr> |
| ), |
| th: ({ children }) => ( |
| <th>{children}</th> |
| ), |
| td: ({ children }) => ( |
| <td>{children}</td> |
| ), |
| }} |
| > |
| {processed} |
| </ReactMarkdown> |
| <style jsx global>{` |
| .prose-custom { font-size: 13px; line-height: 1.7; color: var(--text); font-family: "Google Sans", "Inter", sans-serif; } |
| .prose-custom h1, .prose-custom h2, .prose-custom h3 { color: var(--text); font-weight: 700; margin-top: 1.5em; margin-bottom: 0.5em; } |
| .prose-custom h1 { font-size: 1.25em; border-bottom: 2px solid var(--accent); padding-bottom: 4px; } |
| .prose-custom h2 { font-size: 1.1em; border-bottom: 1px solid var(--border); padding-bottom: 2px; } |
| .prose-custom h3 { font-size: 1em; } |
| .prose-custom p { margin-bottom: 1em; opacity: 0.9; } |
| .prose-custom ul, .prose-custom ol { padding-left: 1.5em; margin-bottom: 1em; } |
| .prose-custom li { margin-bottom: 0.5em; } |
| .prose-custom li::marker { color: var(--accent); } |
| .prose-custom code { background: rgba(66, 133, 244, 0.1); padding: 1px 4px; border: 1px solid var(--border); border-radius: 3px; font-size: 0.95em; color: var(--text); font-family: "JetBrains Mono", monospace; } |
| .prose-custom pre { background: rgba(0,0,0,0.3); padding: 16px; border: 1px solid var(--border); border-radius: 8px; overflow-x: auto; margin-bottom: 1em; } |
| .prose-custom pre code { background: none; padding: 0; border: none; } |
| .prose-custom strong { color: var(--text); font-weight: 700; } |
| .prose-custom blockquote { border-left: 3px solid var(--accent); padding-left: 16px; color: var(--text-dim); margin: 1.5em 0; padding-top: 8px; padding-bottom: 8px; font-style: italic; } |
| .prose-custom a { color: var(--accent); text-decoration: underline; } |
| .prose-custom a:hover { color: #fff; } |
| |
| |
| .gp-table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 12px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); } |
| .gp-table thead { background: rgba(138, 180, 248, 0.08); } |
| .gp-table th { text-align: left; padding: 10px 14px; font-weight: 500; color: var(--accent); border-bottom: 1px solid var(--border); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; } |
| .gp-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: top; } |
| .gp-table tbody tr:hover { background: rgba(255, 255, 255, 0.04); } |
| .gp-table tbody tr:last-child td { border-bottom: none; } |
| `}</style> |
| </div> |
| ); |
| } |
|
|
