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 InstallSection: React.FC<Props> = ({
41  packageName,
42  hideBareInstructions = false,
43  cmd = [`expo install ${packageName}`],
44  href = `https://github.com/expo/expo/tree/master/packages/${packageName}`,
45}) => (
46  <div>
47    <TerminalBlock cmd={cmd} />
48    {hideBareInstructions ? null : (
49      <p css={STYLES_P}>
50        If you're installing this in a{' '}
51        <a css={STYLES_LINK} href="/introduction/managed-vs-bare/#bare-workflow">
52          bare React Native app
53        </a>
54        , you should also follow{' '}
55        <a css={STYLES_BOLD} href={href}>
56          these additional installation instructions
57        </a>
58        .
59      </p>
60    )}
61  </div>
62);
63
64export default InstallSection;
65