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