2023-05-06 15:49:37 +08:00
|
|
|
import * as React from 'react';
|
|
|
|
import { Typography, Skeleton, Carousel } from 'antd';
|
2022-12-11 20:39:46 +08:00
|
|
|
import type { SerializedStyles } from '@emotion/react';
|
2022-11-30 11:05:41 +08:00
|
|
|
import { css } from '@emotion/react';
|
2023-05-06 15:49:37 +08:00
|
|
|
import type { Extra, Icon } from './util';
|
2022-11-09 12:28:04 +08:00
|
|
|
import useSiteToken from '../../../hooks/useSiteToken';
|
2022-12-19 11:42:41 +08:00
|
|
|
import SiteContext from '../../../theme/slots/SiteContext';
|
2022-12-11 20:39:46 +08:00
|
|
|
import { useCarouselStyle } from './util';
|
2022-11-09 12:28:04 +08:00
|
|
|
|
|
|
|
const useStyle = () => {
|
|
|
|
const { token } = useSiteToken();
|
2022-12-11 20:39:46 +08:00
|
|
|
const { carousel } = useCarouselStyle();
|
2022-11-09 12:28:04 +08:00
|
|
|
|
|
|
|
return {
|
2022-12-11 20:39:46 +08:00
|
|
|
itemBase: css`
|
2022-11-09 12:28:04 +08:00
|
|
|
display: flex;
|
2022-12-11 20:39:46 +08:00
|
|
|
flex: 1 1 0;
|
2022-11-09 12:28:04 +08:00
|
|
|
flex-direction: column;
|
|
|
|
align-items: stretch;
|
|
|
|
text-decoration: none;
|
|
|
|
background: ${token.colorBgContainer};
|
2022-12-11 20:39:46 +08:00
|
|
|
border: ${token.lineWidth}px solid ${token.colorBorderSecondary};
|
|
|
|
border-radius: ${token.borderRadiusLG}px;
|
|
|
|
transition: all ${token.motionDurationSlow};
|
|
|
|
padding-block: ${token.paddingMD}px;
|
|
|
|
padding-inline: ${token.paddingLG}px;
|
|
|
|
`,
|
|
|
|
cardItem: css`
|
|
|
|
width: 33%;
|
2022-11-09 12:28:04 +08:00
|
|
|
&:hover {
|
|
|
|
box-shadow: ${token.boxShadowCard};
|
|
|
|
}
|
|
|
|
`,
|
2022-12-11 20:39:46 +08:00
|
|
|
sliderItem: css`
|
|
|
|
margin: 0 ${token.margin}px;
|
|
|
|
text-align: start;
|
|
|
|
`,
|
|
|
|
container: css`
|
|
|
|
display: flex;
|
|
|
|
max-width: 1208px;
|
|
|
|
margin-inline: auto;
|
|
|
|
box-sizing: border-box;
|
|
|
|
padding-inline: ${token.marginXXL}px;
|
|
|
|
column-gap: ${token.paddingMD * 2}px;
|
|
|
|
align-items: stretch;
|
|
|
|
text-align: start;
|
|
|
|
`,
|
|
|
|
carousel,
|
2022-11-09 12:28:04 +08:00
|
|
|
};
|
|
|
|
};
|
|
|
|
|
2022-12-11 20:39:46 +08:00
|
|
|
interface RecommendItemProps {
|
|
|
|
extra: Extra;
|
|
|
|
index: number;
|
|
|
|
icons: Icon[];
|
|
|
|
itemCss: SerializedStyles;
|
|
|
|
}
|
|
|
|
const RecommendItem = ({ extra, index, icons, itemCss }: RecommendItemProps) => {
|
|
|
|
const style = useStyle();
|
|
|
|
const { token } = useSiteToken();
|
|
|
|
|
|
|
|
if (!extra) {
|
|
|
|
return <Skeleton key={index} />;
|
|
|
|
}
|
|
|
|
const icon = icons.find((i) => i.name === extra.source);
|
|
|
|
|
|
|
|
return (
|
2022-12-19 11:42:41 +08:00
|
|
|
<a
|
|
|
|
key={extra?.title}
|
|
|
|
href={extra.href}
|
|
|
|
target="_blank"
|
|
|
|
css={[style.itemBase, itemCss]}
|
|
|
|
rel="noreferrer"
|
|
|
|
>
|
2022-12-11 20:39:46 +08:00
|
|
|
<Typography.Title level={5}>{extra?.title}</Typography.Title>
|
|
|
|
<Typography.Paragraph type="secondary" style={{ flex: 'auto' }}>
|
|
|
|
{extra.description}
|
|
|
|
</Typography.Paragraph>
|
2023-01-04 19:37:57 +08:00
|
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
2022-12-11 20:39:46 +08:00
|
|
|
<Typography.Text>{extra.date}</Typography.Text>
|
2022-12-19 11:42:41 +08:00
|
|
|
{icon && <img src={icon.href} style={{ height: token.fontSize }} alt="banner" />}
|
2022-12-11 20:39:46 +08:00
|
|
|
</div>
|
|
|
|
</a>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2022-11-09 12:28:04 +08:00
|
|
|
export interface BannerRecommendsProps {
|
|
|
|
extras?: Extra[];
|
|
|
|
icons?: Icon[];
|
|
|
|
}
|
|
|
|
|
|
|
|
export default function BannerRecommends({ extras = [], icons = [] }: BannerRecommendsProps) {
|
2022-12-11 20:39:46 +08:00
|
|
|
const styles = useStyle();
|
|
|
|
const { isMobile } = React.useContext(SiteContext);
|
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
|
|
|
|
|
|
|
return (
|
2022-12-11 20:39:46 +08:00
|
|
|
<div>
|
|
|
|
{isMobile ? (
|
|
|
|
<Carousel css={styles.carousel}>
|
|
|
|
{first3.map((extra, index) => (
|
|
|
|
<div key={index}>
|
|
|
|
<RecommendItem
|
|
|
|
extra={extra}
|
|
|
|
index={index}
|
|
|
|
icons={icons}
|
|
|
|
itemCss={styles.sliderItem}
|
|
|
|
/>
|
2022-11-09 12:28:04 +08:00
|
|
|
</div>
|
2022-12-11 20:39:46 +08:00
|
|
|
))}
|
|
|
|
</Carousel>
|
|
|
|
) : (
|
|
|
|
<div css={styles.container}>
|
|
|
|
{first3.map((extra, index) => (
|
|
|
|
<RecommendItem
|
|
|
|
extra={extra}
|
|
|
|
index={index}
|
|
|
|
icons={icons}
|
|
|
|
itemCss={styles.cardItem}
|
|
|
|
key={index}
|
|
|
|
/>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
)}
|
2022-11-09 12:28:04 +08:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|