1import { PropsWithChildren } from 'react';
2
3import { usePageMetadata } from '~/providers/page-metadata';
4import { Terminal } from '~/ui/components/Snippet';
5import { A, P, DEMI } from '~/ui/components/Text';
6
7type InstallSectionProps = PropsWithChildren<{
8  packageName: string;
9  hideBareInstructions?: boolean;
10  cmd?: string[];
11  href?: string;
12}>;
13
14const getPackageLink = (packageNames: string) =>
15  `https://github.com/expo/expo/tree/main/packages/${packageNames.split(' ')[0]}`;
16
17const getInstallCmd = (packageName: string) => `$ npx expo install ${packageName}`;
18
19const InstallSection = ({
20  packageName,
21  hideBareInstructions = false,
22  cmd = [getInstallCmd(packageName)],
23  href = getPackageLink(packageName),
24}: InstallSectionProps) => {
25  const { sourceCodeUrl } = usePageMetadata();
26
27  return (
28    <>
29      <Terminal cmd={cmd} />
30      {hideBareInstructions ? null : (
31        <P>
32          If you're installing this in a{' '}
33          <A href="/archive/managed-vs-bare/#bare-workflow">bare React Native app</A>, you should
34          also follow{' '}
35          <A href={sourceCodeUrl ?? href}>
36            <DEMI>these additional installation instructions</DEMI>
37          </A>
38          .
39        </P>
40      )}
41    </>
42  );
43};
44
45export default InstallSection;
46
47export const APIInstallSection = (props: InstallSectionProps) => {
48  const { packageName } = usePageMetadata();
49  return <InstallSection {...props} packageName={props.packageName ?? packageName} />;
50};
51