46 lines
1.6 KiB
TypeScript
46 lines
1.6 KiB
TypeScript
import type { MDXComponents } from 'mdx/types'
|
|
import {
|
|
Title,
|
|
Text,
|
|
Anchor,
|
|
List,
|
|
ListItem,
|
|
Code,
|
|
Divider,
|
|
Table,
|
|
TableTbody,
|
|
TableTd,
|
|
TableTfoot,
|
|
TableTh,
|
|
TableThead,
|
|
TableTr,
|
|
} from '@pikku/mantine/core'
|
|
|
|
export function useMDXComponents(components: MDXComponents): MDXComponents {
|
|
return {
|
|
h1: (props) => <Title order={1} mt="xl" mb="md" {...props} />,
|
|
h2: (props) => <Title order={2} mt="lg" mb="sm" {...props} />,
|
|
h3: (props) => <Title order={3} mt="md" mb="sm" {...props} />,
|
|
h4: (props) => <Title order={4} mt="md" mb="xs" {...props} />,
|
|
h5: (props) => <Title order={5} mt="sm" mb="xs" {...props} />,
|
|
h6: (props) => <Title order={6} mt="sm" mb="xs" {...props} />,
|
|
p: (props) => <Text mb="md" {...props} />,
|
|
a: (props) => <Anchor {...props} />,
|
|
ul: (props) => <List mb="md" {...props} />,
|
|
ol: (props) => <List mb="md" type="ordered" {...props} />,
|
|
li: (props) => <ListItem {...props} />,
|
|
code: (props) => <Code {...props} />,
|
|
hr: (props) => <Divider my="md" {...props} />,
|
|
strong: (props) => <Text component="strong" fw={700} {...props} />,
|
|
em: (props) => <Text component="em" fs="italic" {...props} />,
|
|
table: (props) => <Table striped highlightOnHover withTableBorder withColumnBorders mb="md" {...props} />,
|
|
thead: (props) => <TableThead {...props} />,
|
|
tbody: (props) => <TableTbody {...props} />,
|
|
tfoot: (props) => <TableTfoot {...props} />,
|
|
tr: (props) => <TableTr {...props} />,
|
|
th: (props) => <TableTh {...props} />,
|
|
td: (props) => <TableTd {...props} />,
|
|
...components,
|
|
}
|
|
}
|