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