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  mdComponents,
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 components={mdComponents}>{`**Deprecated.** ${content}`}</ReactMarkdown>
31        ) : (
32          <BOLD>Deprecated</BOLD>
33        )}
34      </Callout>
35    </div>
36  );
37};
38
39const deprecationNoticeStyle = css({
40  'table &': {
41    marginTop: 0,
42    marginBottom: spacing[3],
43  },
44});
45