👨🏻‍💻👩🏻‍💻 Use Ant Design like a Pro!
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

66 lines
1.9 KiB

import React from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Card, Alert, Typography } from 'antd';
import { useIntl, FormattedMessage } from 'umi';
import styles from './Welcome.less';
const CodePreview: React.FC = ({ children }) => (
<pre className={styles.pre}>
<code>
<Typography.Text copyable>{children}</Typography.Text>
</code>
</pre>
);
const Welcome: React.FC = () => {
const intl = useIntl();
return (
<PageContainer>
<Card>
<Alert
message={intl.formatMessage({
id: 'pages.welcome.alertMessage',
defaultMessage: 'Faster and stronger heavy-duty components have been released.',
})}
type="success"
showIcon
banner
style={{
margin: -12,
marginBottom: 24,
}}
/>
<Typography.Text strong>
<FormattedMessage id="pages.welcome.advancedComponent" defaultMessage="Advanced Form" />{' '}
<a
href="https://procomponents.ant.design/components/table"
rel="noopener noreferrer"
target="__blank"
>
<FormattedMessage id="pages.welcome.link" defaultMessage="Welcome" />
</a>
</Typography.Text>
<CodePreview>yarn add @ant-design/pro-table</CodePreview>
<Typography.Text
strong
style={{
marginBottom: 12,
}}
>
<FormattedMessage id="pages.welcome.advancedLayout" defaultMessage="Advanced layout" />{' '}
<a
href="https://procomponents.ant.design/components/layout"
rel="noopener noreferrer"
target="__blank"
>
<FormattedMessage id="pages.welcome.link" defaultMessage="Welcome" />
</a>
</Typography.Text>
<CodePreview>yarn add @ant-design/pro-layout</CodePreview>
</Card>
</PageContainer>
);
};
export default Welcome;