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.
93 lines
2.4 KiB
93 lines
2.4 KiB
import * as React from 'react';
|
|
import { FormattedMessage, useIntl } from 'react-intl';
|
|
import { Typography } from 'antd';
|
|
import { Link } from 'bisheng/router';
|
|
import Banner from './Banner';
|
|
import RecommendPage from './RecommendPage';
|
|
import DesignPage from './DesignPage';
|
|
import MorePage from './MorePage';
|
|
import Footer from '../Layout/Footer';
|
|
import { getLocalizedPathname } from '../utils';
|
|
import './index.less';
|
|
|
|
const { Title } = Typography;
|
|
|
|
function getStyle() {
|
|
return `
|
|
.rc-footer-container {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.rc-footer-columns {
|
|
max-width: 1208px;
|
|
margin: 0 auto;
|
|
}
|
|
`;
|
|
}
|
|
|
|
interface BlockContentProps {
|
|
title: React.ReactNode;
|
|
extra?: React.ReactNode;
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
const BlockContent: React.FC<BlockContentProps> = ({ title, children, extra }) => (
|
|
<div className="home-block-content">
|
|
<Title level={2} style={{ fontWeight: 'lighter', color: '#314659' }}>
|
|
{title}
|
|
|
|
{extra && <div className="home-block-content-extra">{extra}</div>}
|
|
</Title>
|
|
{children}
|
|
</div>
|
|
);
|
|
|
|
const Home = (props: { location: any }) => {
|
|
const { location } = props;
|
|
const { locale } = useIntl();
|
|
const isZhCN = locale === 'zh-CN';
|
|
|
|
const getLink = () => {
|
|
const path = getLocalizedPathname('/docs/resources', isZhCN, location.query, {
|
|
zhCN: '文章',
|
|
enUS: 'Articles',
|
|
});
|
|
const { pathname, query = {} } = path;
|
|
const pathnames = pathname.split('#');
|
|
if ('direction' in query) {
|
|
return `${pathnames[0]}?direction=rtl#${pathnames[1]}`;
|
|
}
|
|
return path;
|
|
};
|
|
|
|
return (
|
|
<div className="home-container">
|
|
<style dangerouslySetInnerHTML={{ __html: getStyle() }} />
|
|
<Banner location={location} />
|
|
<div style={{ maxWidth: 1256, margin: '0 auto' }}>
|
|
<BlockContent title={<FormattedMessage id="app.home.recommend" />}>
|
|
<RecommendPage />
|
|
</BlockContent>
|
|
|
|
<BlockContent title={<FormattedMessage id="app.home.design-and-framework" />}>
|
|
<DesignPage location={location} />
|
|
</BlockContent>
|
|
|
|
<BlockContent
|
|
title={<FormattedMessage id="app.home.more" />}
|
|
extra={
|
|
<Link to={getLink()} target="_blank">
|
|
<FormattedMessage id="app.home.view-more" />
|
|
</Link>
|
|
}
|
|
>
|
|
<MorePage />
|
|
</BlockContent>
|
|
</div>
|
|
<Footer location={location} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Home;
|
|
|