2019-02-03 17:23:33 +07:00
|
|
|
import React, { Fragment } from 'react';
|
2020-03-08 22:45:07 +07:00
|
|
|
import { useTranslation } from 'react-i18next';
|
2019-02-03 17:23:33 +07:00
|
|
|
|
|
|
|
import { getRegistryURL } from '../../utils/url';
|
2019-06-20 19:37:28 +07:00
|
|
|
import CopyToClipBoard from '../CopyToClipBoard';
|
2019-10-06 22:17:36 +07:00
|
|
|
import Button from '../../muiComponents/Button';
|
2019-10-31 14:12:18 +07:00
|
|
|
import CardContent from '../../muiComponents/CardContent';
|
2019-10-13 02:41:42 +07:00
|
|
|
import { default as Typography } from '../../muiComponents/Heading';
|
2019-10-31 14:12:18 +07:00
|
|
|
import CardActions from '../../muiComponents/CardActions';
|
2019-10-13 02:41:42 +07:00
|
|
|
import Text from '../../muiComponents/Text';
|
2019-06-20 19:37:28 +07:00
|
|
|
|
2019-02-03 17:23:33 +07:00
|
|
|
import { CardStyled as Card, HelpTitle } from './styles';
|
|
|
|
|
2019-11-08 12:23:22 +07:00
|
|
|
export const HELP_TITLE = 'No Package Published Yet.';
|
|
|
|
export const COMPONENT_HELP_ID = 'help-card__title';
|
|
|
|
|
2019-06-20 19:37:28 +07:00
|
|
|
function renderHeadingClipboardSegments(title: string, text: string): React.ReactNode {
|
2019-02-03 17:23:33 +07:00
|
|
|
return (
|
|
|
|
<Fragment>
|
2019-10-13 02:41:42 +07:00
|
|
|
<Text variant={'body1'}>{title}</Text>
|
2019-02-03 17:23:33 +07:00
|
|
|
<CopyToClipBoard text={text} />
|
|
|
|
</Fragment>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2019-06-20 19:37:28 +07:00
|
|
|
const Help: React.FC = () => {
|
2019-02-03 17:23:33 +07:00
|
|
|
const registryUrl = getRegistryURL();
|
2020-03-08 22:45:07 +07:00
|
|
|
const { t } = useTranslation();
|
2019-02-03 17:23:33 +07:00
|
|
|
|
|
|
|
return (
|
2019-06-20 19:37:28 +07:00
|
|
|
<Card id="help-card">
|
2019-02-03 17:23:33 +07:00
|
|
|
<CardContent>
|
2019-11-08 12:23:22 +07:00
|
|
|
<Typography component="h2" gutterBottom={true} id={COMPONENT_HELP_ID} variant="h5">
|
2020-03-08 22:45:07 +07:00
|
|
|
{t('help.title')}
|
2019-02-03 17:23:33 +07:00
|
|
|
</Typography>
|
2019-06-20 19:37:28 +07:00
|
|
|
<HelpTitle color="textSecondary" gutterBottom={true}>
|
2020-03-08 22:45:07 +07:00
|
|
|
{t('help.sub-title')}
|
2019-02-03 17:23:33 +07:00
|
|
|
</HelpTitle>
|
2020-03-08 22:45:07 +07:00
|
|
|
{renderHeadingClipboardSegments(t('help.first-step'), t('help.first-step-command-line', { registryUrl }))}
|
|
|
|
{renderHeadingClipboardSegments(t('help.second-step'), t('help.second-step-command-line', { registryUrl }))}
|
|
|
|
<Text variant="body2">{t('help.third-step')}</Text>
|
2019-02-03 17:23:33 +07:00
|
|
|
</CardContent>
|
|
|
|
<CardActions>
|
2019-10-06 22:17:36 +07:00
|
|
|
<Button color="primary" href="https://verdaccio.org/docs/en/installation" size="small">
|
2020-03-08 22:45:07 +07:00
|
|
|
{t('button.learn-more')}
|
2019-02-03 17:23:33 +07:00
|
|
|
</Button>
|
|
|
|
</CardActions>
|
|
|
|
</Card>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Help;
|