mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-15 17:19:11 +08:00
83 lines
2.8 KiB
TypeScript
83 lines
2.8 KiB
TypeScript
|
import * as React from 'react';
|
|||
|
import { Card, Row, Col } from 'antd';
|
|||
|
import './MorePage.less';
|
|||
|
|
|||
|
interface MoreProps {
|
|||
|
title: string;
|
|||
|
description: string;
|
|||
|
date: string;
|
|||
|
img: string;
|
|||
|
source: 'zhihu' | 'yuque';
|
|||
|
href: string;
|
|||
|
}
|
|||
|
|
|||
|
const SourceImages = {
|
|||
|
zhihu: 'https://gw.alipayobjects.com/zos/basement_prod/5f4e1fd0-d255-4309-b181-a3715a720ebe.svg',
|
|||
|
yuque: 'https://gw.alipayobjects.com/zos/basement_prod/53e7a5b8-c9f4-45a4-8378-cbf50f2dd0d0.svg',
|
|||
|
};
|
|||
|
|
|||
|
const MORE_LIST: MoreProps[] = [
|
|||
|
{
|
|||
|
title: 'Ant Design 1.0 背后的故事:把艺术变成技术',
|
|||
|
description: '本文将跟大家分享 Ant Design 1.0 诞生背后的故事,还原 3-4 年前那些事、那些人。',
|
|||
|
img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Cu8LRZW_AqgAAAAAAAAAAABkARQnAQ',
|
|||
|
date: '2019-11-07',
|
|||
|
source: 'yuque',
|
|||
|
href: 'https://www.yuque.com/lyndon/daylesson/xw45g0',
|
|||
|
},
|
|||
|
{
|
|||
|
title: '「人机自然交互」Ant Design 设计价值观解析',
|
|||
|
description: '为何选择「自然」作为设计价值观?本文会详细阐述这背后的思考和实践。',
|
|||
|
img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*V-w4Q6EvVWsAAAAAAAAAAABkARQnAQ',
|
|||
|
date: '2019-09-26',
|
|||
|
source: 'zhihu',
|
|||
|
href: 'https://zhuanlan.zhihu.com/p/44809866',
|
|||
|
},
|
|||
|
{
|
|||
|
title: 'Ant Design 色板生成算法演进之路',
|
|||
|
description:
|
|||
|
'「确定」 作为设计价值观之一,在调色板中发挥得淋漓尽致,既做到设计有迹可循,也提高代码的可维护性。',
|
|||
|
img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*2iP4TLjiZMwAAAAAAAAAAABkARQnAQ',
|
|||
|
date: '2018-03-13',
|
|||
|
source: 'zhihu',
|
|||
|
href: 'https://zhuanlan.zhihu.com/p/32422584',
|
|||
|
},
|
|||
|
{
|
|||
|
title: '2019,优雅的 AntV 来了',
|
|||
|
description:
|
|||
|
'对可视化系统而言,设计正是把不确定的海量、高维、非结构化的数据用准确、有效的方式传递。',
|
|||
|
img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*_9JJSpF6T6oAAAAAAAAAAABkARQnAQ',
|
|||
|
date: '2019-11-25',
|
|||
|
source: 'zhihu',
|
|||
|
href: 'https://zhuanlan.zhihu.com/p/93620507',
|
|||
|
},
|
|||
|
];
|
|||
|
|
|||
|
const MoreCard = ({ title, description, date, img, source, href }: MoreProps) => {
|
|||
|
return (
|
|||
|
<Col xs={24} sm={6}>
|
|||
|
<a href={href} target="_blank" rel="noopener noreferrer">
|
|||
|
<Card hoverable cover={<img alt={title} src={img} />} className="more-card">
|
|||
|
<Card.Meta title={title} description={description} />
|
|||
|
<div>
|
|||
|
{date}
|
|||
|
<span className="more-card-source">
|
|||
|
<img src={SourceImages[source]} alt={source} />
|
|||
|
</span>
|
|||
|
</div>
|
|||
|
</Card>
|
|||
|
</a>
|
|||
|
</Col>
|
|||
|
);
|
|||
|
};
|
|||
|
|
|||
|
export default function MorePage() {
|
|||
|
return (
|
|||
|
<Row gutter={[24, 32]}>
|
|||
|
{MORE_LIST.map(more => (
|
|||
|
<MoreCard key={more.title} {...more} />
|
|||
|
))}
|
|||
|
</Row>
|
|||
|
);
|
|||
|
}
|