2019-12-26 15:27:52 +08:00
|
|
|
import * as React from 'react';
|
|
|
|
import classNames from 'classnames';
|
2020-03-04 18:28:20 +08:00
|
|
|
import { FormattedMessage, useIntl } from 'react-intl';
|
2020-11-05 17:21:49 +08:00
|
|
|
import { Row, Col, Typography } from 'antd';
|
2020-11-05 15:22:59 +08:00
|
|
|
import { useSiteData } from './util';
|
2019-12-26 15:27:52 +08:00
|
|
|
import './RecommendPage.less';
|
|
|
|
|
|
|
|
const { Title, Paragraph } = Typography;
|
|
|
|
|
|
|
|
interface Recommend {
|
2020-11-05 17:08:44 +08:00
|
|
|
title?: string;
|
|
|
|
img?: string;
|
|
|
|
href?: string;
|
2019-12-26 15:27:52 +08:00
|
|
|
popularize?: boolean;
|
2020-11-05 17:08:44 +08:00
|
|
|
description?: string;
|
|
|
|
loading?: boolean;
|
2019-12-26 15:27:52 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
interface RecommendBlockProps extends Recommend {
|
|
|
|
main?: boolean;
|
|
|
|
}
|
|
|
|
|
|
|
|
const RecommendBlock = ({
|
|
|
|
main,
|
|
|
|
title,
|
|
|
|
popularize,
|
|
|
|
description,
|
|
|
|
img,
|
|
|
|
href,
|
2020-11-05 17:08:44 +08:00
|
|
|
loading,
|
2019-12-26 15:27:52 +08:00
|
|
|
}: RecommendBlockProps) => {
|
|
|
|
return (
|
|
|
|
<a
|
2020-11-05 17:08:44 +08:00
|
|
|
className={classNames('recommend-block', {
|
|
|
|
'recommend-block-main': !!main,
|
|
|
|
'recommend-block-loading': loading,
|
|
|
|
})}
|
2019-12-26 15:27:52 +08:00
|
|
|
href={href}
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
2020-03-23 18:26:00 +08:00
|
|
|
onClick={() => {
|
2020-11-05 15:22:59 +08:00
|
|
|
window?.gtag('event', '点击', {
|
|
|
|
event_category: '首页推广',
|
|
|
|
event_label: href,
|
|
|
|
});
|
2020-03-23 18:26:00 +08:00
|
|
|
}}
|
2019-12-26 15:27:52 +08:00
|
|
|
>
|
|
|
|
<img src={img} alt={title} />
|
|
|
|
{popularize && (
|
|
|
|
<span className="recommend-popularize">
|
|
|
|
<FormattedMessage id="app.home.popularize" />
|
|
|
|
</span>
|
|
|
|
)}
|
|
|
|
<div className="recommend-content">
|
|
|
|
<Title level={4}>{title}</Title>
|
2020-05-31 16:45:55 +08:00
|
|
|
<Paragraph style={{ fontSize: 13 }}>{description}</Paragraph>
|
2019-12-26 15:27:52 +08:00
|
|
|
</div>
|
|
|
|
</a>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2020-03-04 18:28:20 +08:00
|
|
|
export default function RecommendPageo() {
|
|
|
|
const { locale } = useIntl();
|
|
|
|
const isZhCN = locale === 'zh-CN';
|
2020-11-05 15:22:59 +08:00
|
|
|
const list = useSiteData<Recommend[]>('recommendations', isZhCN ? 'cn' : 'en');
|
2020-11-05 17:08:44 +08:00
|
|
|
const isLoading = !list;
|
2019-12-26 15:27:52 +08:00
|
|
|
return (
|
|
|
|
<Row gutter={[24, 24]} style={{ marginBottom: -36 }}>
|
2020-11-05 17:08:44 +08:00
|
|
|
<Col xs={24} sm={14}>
|
|
|
|
<RecommendBlock {...(list ? list[0] : {})} main loading={isLoading} />
|
|
|
|
</Col>
|
|
|
|
<Col xs={24} sm={10}>
|
|
|
|
<Row gutter={[24, 24]}>
|
|
|
|
<Col span={24}>
|
|
|
|
<RecommendBlock {...(list ? list[1] : {})} loading={isLoading} />
|
2019-12-26 15:27:52 +08:00
|
|
|
</Col>
|
2020-11-05 17:08:44 +08:00
|
|
|
<Col span={24}>
|
|
|
|
<RecommendBlock {...(list ? list[2] : {})} loading={isLoading} />
|
2019-12-26 15:27:52 +08:00
|
|
|
</Col>
|
2020-11-05 17:08:44 +08:00
|
|
|
</Row>
|
|
|
|
</Col>
|
2019-12-26 15:27:52 +08:00
|
|
|
</Row>
|
|
|
|
);
|
|
|
|
}
|