Browse Source
* site: add zhihu card * fix * fix * fix * Update .dumi/theme/slots/Content/ZhihuCard.tsx Co-authored-by: afc163 <afc163@gmail.com> * fix * fix * fix * Update basic.tsx * Update .dumi/theme/slots/Content/ZhihuCard.tsx Co-authored-by: afc163 <afc163@gmail.com> * fix * update style * fix * fix * fix: rename * update * update * update url --------- Co-authored-by: afc163 <afc163@gmail.com>pull/42825/merge
lijianan
1 year ago
committed by
GitHub
GitHub
4 changed files with 197 additions and 0 deletions
@ -0,0 +1,188 @@ |
|||
import { RightOutlined, YuqueOutlined, ZhihuOutlined } from '@ant-design/icons'; |
|||
import { css } from '@emotion/react'; |
|||
import { Button, Card, Divider } from 'antd'; |
|||
import React from 'react'; |
|||
import useLocale from '../../../hooks/useLocale'; |
|||
import useSiteToken from '../../../hooks/useSiteToken'; |
|||
|
|||
const ANTD_IMG_URL = |
|||
'https://picx.zhimg.com/v2-3b2bca09c2771e7a82a81562e806be4d.jpg?source=d16d100b'; |
|||
|
|||
const useStyle = () => { |
|||
const { token } = useSiteToken(); |
|||
return { |
|||
card: css` |
|||
width: 100%; |
|||
margin: 40px 0; |
|||
transition: all 0.2s; |
|||
background-color: ${token.colorFillQuaternary}; |
|||
`,
|
|||
bigTitle: css` |
|||
font-size: 16px; |
|||
color: #121212; |
|||
margin-bottom: 24px; |
|||
font-weight: 600; |
|||
`,
|
|||
cardBody: css` |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
`,
|
|||
left: css` |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
img { |
|||
width: 200px; |
|||
margin-right: 24px; |
|||
overflow: hidden; |
|||
border-radius: 8px; |
|||
} |
|||
`,
|
|||
title: css` |
|||
color: #444; |
|||
font-size: 16px; |
|||
font-weight: 600; |
|||
`,
|
|||
subTitle: css` |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
color: #646464; |
|||
font-size: 14px; |
|||
font-weight: 400; |
|||
margin-top: 8px; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
.logo { |
|||
font-size: 24px; |
|||
&.zhihu-logo { |
|||
color: #056de8; |
|||
} |
|||
&.yuque-logo { |
|||
color: #00b96b; |
|||
} |
|||
} |
|||
.arrowIcon { |
|||
margin: 0 8px; |
|||
color: #8a8f8d; |
|||
font-size: 12px; |
|||
} |
|||
.zl-btn { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 0; |
|||
color: #646464; |
|||
} |
|||
`,
|
|||
btn: css` |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
`,
|
|||
}; |
|||
}; |
|||
|
|||
const locales = { |
|||
cn: { |
|||
bigTitle: '文章被以下专栏收录：', |
|||
zhiHu: '一个 UI 设计体系', |
|||
yuQue: 'Ant Design 官方专栏', |
|||
buttonText: '我有想法，去参与讨论', |
|||
}, |
|||
en: { |
|||
bigTitle: 'Articles are included in the column:', |
|||
zhiHu: 'A UI design system', |
|||
yuQue: 'Ant Design official column', |
|||
buttonText: 'Go to discuss', |
|||
}, |
|||
}; |
|||
|
|||
interface Props { |
|||
zhihuLink?: string; |
|||
yuqueLink?: string; |
|||
} |
|||
|
|||
const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink }) => { |
|||
const [locale] = useLocale(locales); |
|||
const { card, bigTitle, cardBody, left, title, subTitle, btn } = useStyle(); |
|||
if (!zhihuLink && !yuqueLink) { |
|||
return null; |
|||
} |
|||
return ( |
|||
<Card css={card} bordered={false}> |
|||
<h3 css={bigTitle}>{locale.bigTitle}</h3> |
|||
{zhihuLink && ( |
|||
<div css={cardBody}> |
|||
<div css={left}> |
|||
<img src={ANTD_IMG_URL} alt="antd" /> |
|||
<div> |
|||
<p css={title}>Ant Design</p> |
|||
<div css={subTitle}> |
|||
<ZhihuOutlined className="logo zhihu-logo" /> |
|||
<RightOutlined className="arrowIcon" /> |
|||
<Button |
|||
target="_blank" |
|||
href="https://www.zhihu.com/column/c_1564262000561106944" |
|||
className="zl-btn" |
|||
type="link" |
|||
> |
|||
{locale.zhiHu} |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<Button |
|||
type="primary" |
|||
css={btn} |
|||
icon={<ZhihuOutlined style={{ fontSize: 15 }} />} |
|||
ghost |
|||
target="_blank" |
|||
href={zhihuLink} |
|||
> |
|||
{locale.buttonText} |
|||
</Button> |
|||
</div> |
|||
)} |
|||
{yuqueLink && ( |
|||
<> |
|||
<Divider /> |
|||
<div css={cardBody}> |
|||
<div css={left}> |
|||
<img src={ANTD_IMG_URL} alt="antd" /> |
|||
<div> |
|||
<p css={title}>Ant Design</p> |
|||
<div css={subTitle}> |
|||
<YuqueOutlined className="logo yuque-logo" /> |
|||
<RightOutlined className="arrowIcon" /> |
|||
<Button |
|||
target="_blank" |
|||
href="https://www.yuque.com/ant-design/ant-design" |
|||
className="zl-btn" |
|||
type="link" |
|||
> |
|||
{locale.yuQue} |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<Button |
|||
type="primary" |
|||
css={btn} |
|||
icon={<YuqueOutlined style={{ fontSize: 15 }} />} |
|||
ghost |
|||
target="_blank" |
|||
href={yuqueLink} |
|||
> |
|||
{locale.buttonText} |
|||
</Button> |
|||
</div> |
|||
</> |
|||
)} |
|||
</Card> |
|||
); |
|||
}; |
|||
|
|||
export default ColumnCard; |
|||
Loading…
Reference in new issue