| 34 | }; |
| 35 | |
| 36 | const Main = ({ children, className, id }: MainProps) => { |
| 37 | return ( |
| 38 | <main |
| 39 | className={cn( |
| 40 | // `Main` Specific Styles |
| 41 | "max-w-none prose-p:m-0", |
| 42 | // General Prose |
| 43 | "prose:font-sans prose prose-neutral dark:prose-invert xl:prose-lg", |
| 44 | // Prose Headings |
| 45 | "prose-headings:font-normal", |
| 46 | "prose-h1:font-semibold prose-h1:tracking-tight", |
| 47 | // Prose Strong |
| 48 | "prose-strong:font-semibold", |
| 49 | // Inline Links |
| 50 | "prose-a:text-foreground/75 prose-a:underline prose-a:decoration-primary/50 prose-a:underline-offset-2 prose-a:transition-all", |
| 51 | // Inline Link Hover |
| 52 | "hover:prose-a:text-foreground hover:prose-a:decoration-primary", |
| 53 | // Blockquotes |
| 54 | "prose-blockquote:not-italic", |
| 55 | // Pre and Code Blocks |
| 56 | "prose-pre:border prose-pre:bg-muted/25 prose-pre:text-foreground", |
| 57 | className, |
| 58 | )} |
| 59 | id={id} |
| 60 | > |
| 61 | {children} |
| 62 | </main> |
| 63 | ); |
| 64 | }; |
| 65 | |
| 66 | // Section Component |
| 67 | type SectionProps = { |