Prose

1import * as React from "react"
2 
3import { cn } from "@/lib/utils"
4 
5/**
6 * Article prose container. Keeps MDX and plain-HTML content consistent.
7 */
8export function Prose({
9  className,
10  ...props
11}: React.HTMLAttributes<HTMLDivElement>) {
12  return (
13    <div
14      className={cn(
15        "prose-studio text-foreground",
16        "[&>h1]:ds-display [&>h1]:text-4xl [&>h1]:mt-0 [&>h1]:mb-6",
17        "[&>h2]:ds-headline [&>h2]:text-2xl [&>h2]:mt-12 [&>h2]:mb-4",
18        "[&>h3]:ds-headline [&>h3]:text-xl [&>h3]:mt-10 [&>h3]:mb-3",
19        "[&>p]:text-[0.975rem] [&>p]:leading-[1.75] [&>p]:text-foreground/85 [&>p]:my-5",
20        "[&>ul]:my-5 [&>ul]:list-disc [&>ul]:pl-6 [&>ul>li]:my-1.5 [&>ul>li]:text-foreground/85",
21        "[&>ol]:my-5 [&>ol]:list-decimal [&>ol]:pl-6 [&>ol>li]:my-1.5 [&>ol>li]:text-foreground/85",
22        "[&>blockquote]:my-6 [&>blockquote]:border-l-2 [&>blockquote]:border-brand/50 [&>blockquote]:pl-4 [&>blockquote]:text-foreground/75 [&>blockquote]:italic",
23        "[&>hr]:my-10 [&>hr]:border-border-subtle",
24        "[&_a]:underline [&_a]:underline-offset-4 [&_a]:decoration-brand/40 hover:[&_a]:decoration-brand [&_a]:text-foreground",
25        "[&_code]:border [&_code]:border-border-subtle [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:text-[0.85em] [&_code]:font-mono",
26        "[&>pre]:my-6 [&>pre]:overflow-x-auto [&>pre]:border [&>pre]:border-border-subtle [&>pre]:bg-muted/30 [&>pre]:p-4 [&>pre]:text-[0.88rem]",
27        "[&>pre_code]:border-0 [&>pre_code]:bg-transparent [&>pre_code]:p-0",
28        "[&>img]:my-8 [&>img]:border [&>img]:border-border-subtle",
29        "[&>table]:my-6 [&>table]:w-full [&>table]:text-sm",
30        "[&>table_th]:border-b [&>table_th]:border-border [&>table_th]:px-3 [&>table_th]:py-2 [&>table_th]:text-left [&>table_th]:font-medium",
31        "[&>table_td]:border-b [&>table_td]:border-border-subtle [&>table_td]:px-3 [&>table_td]:py-2",
32        className
33      )}
34      {...props}
35    />
36  )
37}