forked from areski/flowbite-react
-
Notifications
You must be signed in to change notification settings - Fork 0
/
mdx-components.tsx
37 lines (36 loc) · 1.23 KB
/
mdx-components.tsx
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
import type { MDXComponents } from 'mdx/types';
export const useMDXComponents: (components: MDXComponents) => MDXComponents = (components) => {
return {
h2: (props) => (
<h2
className="group relative z-20 text-2xl font-bold text-gray-900 before:invisible before:-mt-20 before:block before:h-20 before:content-[''] before:dark:text-white"
{...props}
>
{props.children}
<a
aria-label={`Link to this section: ${props.children}`}
href={`#${props.id}`}
className="ml-2 text-primary-700 opacity-0 transition-opacity group-hover:opacity-100 dark:text-primary-500"
>
#
</a>
</h2>
),
h3: (props) => (
<h3
className="group relative z-10 text-2xl font-bold text-gray-900 before:invisible before:-mt-20 before:block before:h-20 before:content-[''] before:dark:text-white"
{...props}
>
{props.children}
<a
aria-label={`Link to this section: ${props.children}`}
href={`#${props.id}`}
className="ml-2 text-primary-700 opacity-0 transition-opacity group-hover:opacity-100 dark:text-primary-500"
>
#
</a>
</h3>
),
...components,
};
};