2022-11-09 12:28:04 +08:00
|
|
|
import * as React from 'react';
|
|
|
|
import type { Extra, Icon } from './util';
|
|
|
|
import useSiteToken from '../../../hooks/useSiteToken';
|
2022-11-17 20:56:35 +08:00
|
|
|
import { Col, Row, Card, Typography, Skeleton } from 'antd';
|
2022-11-09 12:28:04 +08:00
|
|
|
import { css } from '@emotion/react';
|
|
|
|
|
|
|
|
const useStyle = () => {
|
|
|
|
const { token } = useSiteToken();
|
|
|
|
|
|
|
|
return {
|
|
|
|
card: css`
|
|
|
|
border: ${token.lineWidth}px solid ${token.colorBorderSecondary};
|
|
|
|
border-radius: ${token.borderRadiusLG}px;
|
|
|
|
padding-block: ${token.paddingMD}px;
|
|
|
|
padding-inline: ${token.paddingLG}px;
|
|
|
|
flex: 1 1 0;
|
|
|
|
width: 33%;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: stretch;
|
|
|
|
text-decoration: none;
|
|
|
|
transition: all ${token.motionDurationSlow};
|
|
|
|
background: ${token.colorBgContainer};
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
box-shadow: ${token.boxShadowCard};
|
|
|
|
}
|
|
|
|
`,
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
export interface BannerRecommendsProps {
|
|
|
|
extras?: Extra[];
|
|
|
|
icons?: Icon[];
|
|
|
|
}
|
|
|
|
|
|
|
|
export default function BannerRecommends({ extras = [], icons = [] }: BannerRecommendsProps) {
|
|
|
|
const style = useStyle();
|
2022-11-17 20:56:35 +08:00
|
|
|
const first3 = extras.length === 0 ? Array(3).fill(null) : extras.slice(0, 3);
|
2022-11-09 12:28:04 +08:00
|
|
|
const { token } = useSiteToken();
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div
|
|
|
|
style={{
|
|
|
|
maxWidth: 1208,
|
|
|
|
marginInline: 'auto',
|
|
|
|
boxSizing: 'border-box',
|
|
|
|
paddingInline: token.marginXXL,
|
|
|
|
display: 'flex',
|
|
|
|
columnGap: token.paddingMD * 2,
|
|
|
|
alignItems: 'stretch',
|
|
|
|
textAlign: 'start',
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{first3.map((extra, index) => {
|
2022-11-17 20:56:35 +08:00
|
|
|
if (!extra) {
|
2022-11-21 14:00:32 +08:00
|
|
|
return <Skeleton key={index} />;
|
2022-11-17 20:56:35 +08:00
|
|
|
}
|
|
|
|
const icon = icons.find((icon) => icon.name === extra.source);
|
2022-11-09 12:28:04 +08:00
|
|
|
return (
|
|
|
|
<a key={index} href={extra.href} target="_blank" css={style.card}>
|
|
|
|
<Typography.Title level={5}>{extra.title}</Typography.Title>
|
|
|
|
<Typography.Paragraph type="secondary" style={{ flex: 'auto' }}>
|
|
|
|
{extra.description}
|
|
|
|
</Typography.Paragraph>
|
|
|
|
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
|
|
|
<Typography.Text>{extra.date}</Typography.Text>
|
|
|
|
{icon && <img src={icon.href} style={{ height: token.fontSize }} />}
|
|
|
|
</div>
|
|
|
|
</a>
|
|
|
|
);
|
|
|
|
})}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|