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