mirror of
https://github.com/SomboChea/ui
synced 2024-05-18 09:21:37 +07:00
67d7188cf5
* chore: update material-ui@4.x * test: update test for ActionBar and TestField * chore: add types * chore: update types * test: update test for Author * chore: fixed bunch of unit test * chore: remove unused import * chore: remove comments * chore: replace shallow my mount * chore: update git hooks * chore: fix styles * chore: update dependencies * chore: remove types material-ui
47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
import Button from '@material-ui/core/Button';
|
|
import CardActions from '@material-ui/core/CardActions';
|
|
import CardContent from '@material-ui/core/CardContent';
|
|
import Typography from '@material-ui/core/Typography';
|
|
import React, { Fragment } from 'react';
|
|
|
|
import { getRegistryURL } from '../../utils/url';
|
|
import CopyToClipBoard from '../CopyToClipBoard';
|
|
|
|
import { CardStyled as Card, HelpTitle } from './styles';
|
|
|
|
function renderHeadingClipboardSegments(title: string, text: string): React.ReactNode {
|
|
return (
|
|
<Fragment>
|
|
<Typography variant={'body1'}>{title}</Typography>
|
|
<CopyToClipBoard text={text} />
|
|
</Fragment>
|
|
);
|
|
}
|
|
|
|
const Help: React.FC = () => {
|
|
const registryUrl = getRegistryURL();
|
|
|
|
return (
|
|
<Card id="help-card">
|
|
<CardContent>
|
|
<Typography component="h2" gutterBottom={true} id="help-card__title" variant="h5">
|
|
{'No Package Published Yet.'}
|
|
</Typography>
|
|
<HelpTitle color="textSecondary" gutterBottom={true}>
|
|
{'To publish your first package just:'}
|
|
</HelpTitle>
|
|
{renderHeadingClipboardSegments('1. Login', `npm adduser --registry ${registryUrl}`)}
|
|
{renderHeadingClipboardSegments('2. Publish', `npm publish --registry ${registryUrl}`)}
|
|
<Typography variant="body2">{'3. Refresh this page.'}</Typography>
|
|
</CardContent>
|
|
<CardActions>
|
|
<Button color="primary" href="https://verdaccio.org/docs/en/installation" size="small" target="_blank">
|
|
{'Learn More'}
|
|
</Button>
|
|
</CardActions>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default Help;
|