| 102 | }; |
| 103 | |
| 104 | const Article = ({ |
| 105 | children, |
| 106 | className, |
| 107 | id, |
| 108 | dangerouslySetInnerHTML, |
| 109 | }: ArticleProps) => { |
| 110 | return ( |
| 111 | <article |
| 112 | dangerouslySetInnerHTML={dangerouslySetInnerHTML} |
| 113 | className={cn( |
| 114 | // General Prose |
| 115 | "prose:font-sans prose prose-neutral dark:prose-invert", |
| 116 | // Prose Headings |
| 117 | "prose-headings:text-lg prose-headings:font-medium", |
| 118 | // Prose Strong |
| 119 | "prose-strong:font-semibold", |
| 120 | // Inline Links |
| 121 | "prose-a:text-foreground/75 prose-a:underline prose-a:decoration-primary/50 prose-a:underline-offset-2 prose-a:transition-all", |
| 122 | // Inline Link Hover |
| 123 | "hover:prose-a:text-foreground hover:prose-a:decoration-primary", |
| 124 | // Blockquotes |
| 125 | "prose-blockquote:not-italic", |
| 126 | // Pre and Code Blocks |
| 127 | "prose-pre:border prose-pre:bg-muted/25 prose-pre:text-foreground", |
| 128 | className, |
| 129 | )} |
| 130 | id={id} |
| 131 | > |
| 132 | {children} |
| 133 | </article> |
| 134 | ); |
| 135 | }; |
| 136 | |
| 137 | export { Layout, Main, Section, Container, Article }; |