mirror of https://github.com/lukechilds/docs.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
46 lines
1.2 KiB
46 lines
1.2 KiB
import React from 'react';
|
|
import { Box, space } from '@blockstack/ui';
|
|
import hydrate from 'next-mdx-remote/hydrate';
|
|
import { Components } from '@components/mdx/mdx-components';
|
|
import { slugify } from '@common/utils';
|
|
import { css } from '@styled-system/css';
|
|
import { TableOfContents } from '@components/toc';
|
|
|
|
export const Glossary = ({ data }) => {
|
|
return (
|
|
<>
|
|
<TableOfContents
|
|
columns={[2, 2, 3, 3]}
|
|
headings={data.map(entry => ({
|
|
content: entry.term,
|
|
level: 2,
|
|
}))}
|
|
/>
|
|
{data.map(entry => (
|
|
<>
|
|
<Components.h3 pl={space('extra-loose')} id={slugify(entry.term)}>
|
|
{entry.term}
|
|
</Components.h3>
|
|
|
|
<Box
|
|
css={css({
|
|
width: '100%',
|
|
maxWidth: '48ch',
|
|
pl: space(['none', 'none', 'base-loose']),
|
|
'& p': {
|
|
display: 'block',
|
|
wordBreak: 'break-word',
|
|
hyphens: 'auto',
|
|
},
|
|
code: {
|
|
wordBreak: 'break-all',
|
|
},
|
|
})}
|
|
>
|
|
{hydrate(entry.definition, Components)}
|
|
</Box>
|
|
</>
|
|
))}
|
|
</>
|
|
);
|
|
};
|
|
|