1import { css } from '@emotion/react';
2import { spacing } from '@expo/styleguide';
3import ReactMarkdown from 'react-markdown';
4
5import { CommentData } from '~/components/plugins/api/APIDataTypes';
6import {
7  getCommentContent,
8  getTagData,
9  mdInlineComponents,
10} from '~/components/plugins/api/APISectionUtils';
11import { Callout } from '~/ui/components/Callout';
12import { BOLD } from '~/ui/components/Text';
13
14type Props = {
15  comment?: CommentData;
16};
17
18export const APISectionDeprecationNote = ({ comment }: Props) => {
19  const deprecation = getTagData('deprecated', comment);
20
21  if (!deprecation) {
22    return null;
23  }
24
25  const content = getCommentContent(deprecation.content);
26  return (
27    <div css={deprecationNoticeStyle}>
28      <Callout type="warning" key="deprecation-note">
29        {content.length ? (
30          <ReactMarkdown
31            components={mdInlineComponents}>{`**Deprecated.** ${content}`}</ReactMarkdown>
32        ) : (
33          <BOLD>Deprecated</BOLD>
34        )}
35      </Callout>
36    </div>
37  );
38};
39
40const deprecationNoticeStyle = css({
41  'table &': {
42    marginTop: 0,
43    marginBottom: spacing[3],
44  },
45});
46