ant-design/site/theme/template/Home/MorePage.tsx
二货机器人 abf215a982
docs: Update 4.0 site (#20290)
* init recommend block

* init design pages

* home frames

* add background banner

* hello, Hitu makes the animation

* add media query

* add images

* update types

* add declare

* preload support

* update ignore

* additional ignore site Home lint

* update ignore

* add hover effect

* adjust alt of bannber

* adjust lang & card shadow

* fix typo

* adjust desc

* hitu in english

* article add link

* Certainty is hitu

* Meaning Hitu

* Growth with Hitu

* Natural Hitu

* slow down of Natural

* adjust speed of icons

* New Meaning animation

* adjust animation duration

* update card link

* update link

* values doc

* replace images

* faster Growth

* update values

* fix lint

* all slow down

* adjust padding

* update icons

* adjust margin

* update images

* adjust montion

* adjust by designer

* update pages

* update design prod

* update articles

* update site style

* update doc

* update images

* update style

* lint fix

* adjust liner color

* github text color update

* adjust margin of title

* mobile design

* update design sub card

* update style

* less lint

* update images

* design card auto height

* update img

* update logo transition

* adjust card style

* adjust style to fix 184

* adjust nav style

* category it

* slow down of logo

* update style

* hide video link

* hitu article

* use img of hitu

* update docs

* style lint

* update Hitu layout doc

* update images

* speed up logo

* update link

* clean up

* clean up

* update doc

* adjust doc

* update images
2019-12-26 15:27:52 +08:00

83 lines
2.8 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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>
);
}