mirror of https://github.com/lukechilds/polar.git
jamaljsr
5 years ago
11 changed files with 112 additions and 51 deletions
@ -0,0 +1,10 @@ |
|||
.welcome { |
|||
font-size: 1.1rem; |
|||
margin: 16px; |
|||
text-align: center; |
|||
} |
|||
|
|||
.create { |
|||
padding: 16px; |
|||
text-align: center; |
|||
} |
@ -0,0 +1,26 @@ |
|||
import React from 'react'; |
|||
import { useTranslation } from 'react-i18next'; |
|||
import { Link } from 'react-router-dom'; |
|||
import { Button, Card } from 'antd'; |
|||
import { NETWORK } from 'components/routing'; |
|||
import styles from './GetStarted.module.less'; |
|||
|
|||
const GetStarted: React.FC = () => { |
|||
const { t } = useTranslation(); |
|||
|
|||
return ( |
|||
<Card title={t('cmps.get-started.title')}> |
|||
<p className={styles.welcome}>{t('cmps.get-started.welcome-1')}</p> |
|||
<p className={styles.welcome}>{t('cmps.get-started.welcome-2')}</p> |
|||
<p className={styles.create}> |
|||
<Link to={NETWORK}> |
|||
<Button type="primary" size="large"> |
|||
{t('cmps.get-started.create-btn', 'Create your first Network')} |
|||
</Button> |
|||
</Link> |
|||
</p> |
|||
</Card> |
|||
); |
|||
}; |
|||
|
|||
export default GetStarted; |
@ -0,0 +1,3 @@ |
|||
.network { |
|||
margin-top: 16px; |
|||
} |
@ -0,0 +1,40 @@ |
|||
import React from 'react'; |
|||
import { Card, Col, Icon, Row, Statistic } from 'antd'; |
|||
import { useStoreActions } from 'store'; |
|||
import { Network } from 'types'; |
|||
import { StatusBadge } from 'components/common'; |
|||
import { NETWORK_VIEW } from 'components/routing'; |
|||
import styles from './NetworkCard.module.less'; |
|||
|
|||
const NetworkCard: React.FC<{ network: Network }> = ({ network }) => { |
|||
const { navigateTo } = useStoreActions(s => s.app); |
|||
|
|||
return ( |
|||
<Card |
|||
title={network.name} |
|||
className={styles.network} |
|||
hoverable |
|||
extra={<StatusBadge status={network.status} />} |
|||
onClick={() => navigateTo(NETWORK_VIEW(network.id))} |
|||
> |
|||
<Row> |
|||
<Col span={12}> |
|||
<Statistic |
|||
title="Lightning Nodes" |
|||
value={network.nodes.lightning.length} |
|||
suffix={<Icon type="thunderbolt" />} |
|||
/> |
|||
</Col> |
|||
<Col span={12}> |
|||
<Statistic |
|||
title="Bitcoin Nodes" |
|||
value={network.nodes.bitcoin.length} |
|||
suffix={<Icon type="link" />} |
|||
/> |
|||
</Col> |
|||
</Row> |
|||
</Card> |
|||
); |
|||
}; |
|||
|
|||
export default NetworkCard; |
@ -1 +1,3 @@ |
|||
export { default as Home } from './Home'; |
|||
export { default as NetworkCard } from './NetworkCard'; |
|||
export { default as GetStarted } from './GetStarted'; |
|||
|
Loading…
Reference in new issue