web/mdx-components.tsx at main · otomadb/web · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
"use client";

import clsx from "clsx";
import type { MDXComponents } from "mdx/types";

// This file is required to use MDX in `app` directory.
export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    h1: ({ children, className, ...props }) => (
      <h1
        {...props}
        id={children?.toString()}
        className={clsx(className, "mb-2 text-3xl font-bold text-snow-lighter")}
      >
        {children}
      </h1>
    ),
    h2: ({ children, className, ...props }) => (
      <h2
        {...props}
        id={children?.toString()}
        className={clsx(
          className,
          "mb-1 mt-12 text-2xl font-bold text-snow-lighter"
        )}
      >
        {children}
      </h2>
    ),
    h3: ({ children, className, ...props }) => (
      <h3
        {...props}
        id={children?.toString()}
        className={clsx(
          className,
          "mb-1 mt-4 text-lg font-semibold text-snow-lighter"
        )}
      >
        {children}
      </h3>
    ),
    ul: ({ children, className, ...props }) => (
      <ul
        {...props}
        className={clsx(className, "my-2 flex list-disc flex-col pl-8")}
      >
        {children}
      </ul>
    ),
    ol: ({ children, className, ...props }) => (
      <ul
        {...props}
        className={clsx(className, "my-2 flex list-decimal flex-col pl-8")}
      >
        {children}
      </ul>
    ),
    li: ({ children, className, ...props }) => (
      <li {...props} className={clsx(className, "text-sm text-snow-primary")}>
        {children}
      </li>
    ),
    blockquote: ({ children, className, ...props }) => (
      <blockquote
        {...props}
        className={clsx(
          className,
          "my-4 border-l-4 border-obsidian-lightest bg-obsidian-lighter px-4 py-2 text-snow-lighter"
        )}
      >
        {children}
      </blockquote>
    ),
    hr: ({ children, className, ...props }) => (
      <hr {...props} className={clsx(className, "my-2")}>
        {children}
      </hr>
    ),
    p: ({ children, className, ...props }) => (
      <p
        {...props}
        className={clsx(
          className,
          "text-base  leading-relaxed text-snow-primary"
        )}
      >
        {children}
      </p>
    ),
    a: ({ children, className, ...props }) => (
      <a
        {...props}
        className={clsx(className, "text-vivid-primary hover:underline")}
      >
        {children}
      </a>
    ),
    em: ({ children, className, ...props }) => (
      <em {...props} className={clsx(className, "italic")}>
        {children}
      </em>
    ),
    strong: ({ children, className, ...props }) => (
      <strong
        {...props}
        className={clsx(className, "font-semibold text-snow-lighter")}
      >
        {children}
      </strong>
    ),
    code: ({ children, className, ...props }) => (
      <code
        {...props}
        className={clsx(className, "bg-blue-100 px-0.5 font-mono")}
      >
        {children}
      </code>
    ),
    ...components,
  };
}