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