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 <A href="/bare/overview/">bare React Native app</A>, you
33          should also follow{' '}
34          <A href={sourceCodeUrl ?? href}>
35            <DEMI>these additional installation instructions</DEMI>
36          </A>
37          .
38        </P>
39      )}
40    </>
41  );
42};
43
44export default InstallSection;
45
46export const APIInstallSection = (props: InstallSectionProps) => {
47  const { packageName } = usePageMetadata();
48  return <InstallSection {...props} packageName={props.packageName ?? packageName} />;
49};
50