surveywithcode.github.io/mdx-components.jsx at main · SurveyWithCode/surveywithcode.github.io · 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
import { Anchor } from "@/coreui/anchor"
import { Tr, Th, Td, Code, Table, Pre, Details, Summary } from "@/coreui"
import cn from "clsx"

const EXTERNALHREFREGEX = /https?:\/\//

export const Link = ({ href = "", className, ...props }) => (
  <Anchor
    href={href}
    newWindow={EXTERNALHREFREGEX.test(href)}
    className={cn(
      "text-primary-600 underline decoration-from-font [text-underline-position:from-font]",
      className
    )}
    {...props}
  />
)

const A = ({ href = "", ...props }) => (
  <Anchor href={href} newWindow={EXTERNALHREFREGEX.test(href)} {...props} />
)

export function useMDXComponents(components) {
  return {
    h1: (props) => (
      <h1
        className="my-6 text-3xl font-bold tracking-tight text-slate-900 dark:text-slate-100"
        {...props}
      />
    ),
    h2: (props) => (
      <h2
        className={cn(
          "font-semibold tracking-tight text-slate-900 dark:text-slate-100",
          "mt-6 border-b text-2xl border-neutral-200/70 contrast-more:border-neutral-400 dark:border-primary-100/10 contrast-more:dark:border-neutral-400"
        )}
        {...props}
      />
    ),
    h3: (props) => (
      <h3
        className={cn(
          "font-semibold tracking-tight text-slate-900 dark:text-slate-100",
          "mt-8 text-xl"
        )}
        {...props}
      />
    ),
    h4: (props) => (
      <h4
        className={cn(
          "font-semibold tracking-tight text-slate-900 dark:text-slate-100",
          "mt-8 text-lg"
        )}
        {...props}
      />
    ),
    h5: (props) => (
      <h5
        className={cn(
          "font-semibold tracking-tight text-slate-900 dark:text-slate-100",
          "mt-8 text-md"
        )}
        {...props}
      />
    ),
    h6: (props) => (
      <h6
        className={cn(
          "font-semibold tracking-tight text-slate-900 dark:text-slate-100",
          "mt-8 text-base"
        )}
        {...props}
      />
    ),
    ul: ({ children }) => (
      <ul className="mt-4 list-disc first:mt-0 ltr:ml-4 rtl:mr-4">
        {children}
      </ul>
    ),
    ol: (props) => (
      <ol
        className="mt-4 list-decimal first:mt-0 ltr:ml-6 rtl:mr-6"
        {...props}
      />
    ),
    li: (props) => <li className="my-2" {...props} />,
    blockquote: (props) => (
      <blockquote
        className={cn(
          "mt-4 border-gray-300 italic text-gray-700 dark:border-gray-700 dark:text-gray-400",
          "first:mt-0 ltr:border-l-2 ltr:pl-6 rtl:border-r-2 rtl:pr-6"
        )}
        {...props}
      />
    ),
    hr: (props) => (
      <hr
        className="my-8 border-neutral-200/70 contrast-more:border-neutral-400 dark:border-primary-100/10 contrast-more:dark:border-neutral-400"
        {...props}
      />
    ),
    a: Link,
    table: (props) => (
      <Table className="swr-scrollbar mt-4 p-0 first:mt-0" {...props} />
    ),
    p: (props) => <p className="mt-4 first:mt-0" {...props} />,
    tr: Tr,
    th: Th,
    td: Td,
    details: (props) => <Details {...props} />,
    summary: (props) => <Summary {...props} />,
    pre: Pre,
    code: Code,
    ...components,
  }
}