1import { css } from '@emotion/react';
2import { theme, typography } from '@expo/styleguide';
3import * as React from 'react';
4
5import { usePageMetadata } from '~/providers/page-metadata';
6import { Terminal } from '~/ui/components/Snippet';
7
8const STYLES_P = css`
9  line-height: 1.8rem;
10  margin-top: 1.4rem;
11  margin-bottom: 1.4rem;
12  color: ${theme.text.default};
13`;
14
15const STYLES_BOLD = css`
16  font-family: ${typography.fontFaces.medium};
17  font-weight: 400;
18  text-decoration: none;
19  color: ${theme.link.default};
20  :hover {
21    text-decoration: underline;
22  }
23`;
24const STYLES_LINK = css`
25  text-decoration: none;
26  color: ${theme.link.default};
27  :hover {
28    text-decoration: underline;
29  }
30`;
31
32type Props = {
33  packageName: string;
34  hideBareInstructions?: boolean;
35  cmd?: string[];
36  href?: string;
37};
38
39const getPackageLink = (packageNames: string) =>
40  `https://github.com/expo/expo/tree/main/packages/${packageNames.split(' ')[0]}`;
41
42const InstallSection: React.FC<Props> = ({
43  packageName,
44  hideBareInstructions = false,
45  cmd = [`$ expo install ${packageName}`],
46  href = getPackageLink(packageName),
47}) => (
48  <>
49    <Terminal cmd={cmd} />
50    {hideBareInstructions ? null : (
51      <p css={STYLES_P}>
52        If you're installing this in a{' '}
53        <a css={STYLES_LINK} href="/introduction/managed-vs-bare/#bare-workflow">
54          bare React Native app
55        </a>
56        , you should also follow{' '}
57        <a css={STYLES_BOLD} href={href}>
58          these additional installation instructions
59        </a>
60        .
61      </p>
62    )}
63  </>
64);
65
66export default InstallSection;
67
68export const APIInstallSection: React.FC<Props> = props => {
69  const { packageName } = usePageMetadata();
70  return <InstallSection {...props} packageName={props.packageName ?? packageName} />;
71};
72