ant-design/site/theme/template/Home/RecommendPage.tsx

85 lines
2.1 KiB
TypeScript
Raw Normal View History

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';
import { useSiteData } from './util';
2019-12-26 15:27:52 +08:00
import './RecommendPage.less';
const { Title, Paragraph } = Typography;
interface Recommend {
title?: string;
img?: string;
href?: string;
2019-12-26 15:27:52 +08:00
popularize?: boolean;
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,
loading,
2019-12-26 15:27:52 +08:00
}: RecommendBlockProps) => {
return (
<a
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"
onClick={() => {
window?.gtag('event', '点击', {
event_category: '首页推广',
event_label: href,
});
}}
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>
<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';
const list = useSiteData<Recommend[]>('recommendations', isZhCN ? 'cn' : 'en');
const isLoading = !list;
2019-12-26 15:27:52 +08:00
return (
<Row gutter={[24, 24]} style={{ marginBottom: -36 }}>
<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>
<Col span={24}>
<RecommendBlock {...(list ? list[2] : {})} loading={isLoading} />
2019-12-26 15:27:52 +08:00
</Col>
</Row>
</Col>
2019-12-26 15:27:52 +08:00
</Row>
);
}