import React, { useContext } from 'react'; import { Badge, Carousel, Flex, Skeleton, Typography } from 'antd'; import { createStyles } from 'antd-style'; import classNames from 'classnames'; import useLocale from '../../../hooks/useLocale'; import SiteContext from '../../../theme/slots/SiteContext'; import type { Extra, Icon } from './util'; import { getCarouselStyle, useSiteData } from './util'; const useStyle = createStyles(({ token, css, cx }) => { const { carousel } = getCarouselStyle(); const itemBase = css` display: flex; flex: 1 1 0; flex-direction: column; align-items: stretch; text-decoration: none; background: ${token.colorBgContainer}; 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; box-sizing: border-box; `; return { itemBase, ribbon: css` & > .${cx(itemBase)} { height: 100%; } `, cardItem: css` &:hover { box-shadow: ${token.boxShadowCard}; } `, sliderItem: css` margin: 0 ${token.margin}px; text-align: start; `, container: css` display: flex; width: 100%; max-width: 100%; margin-inline: auto; box-sizing: border-box; column-gap: ${token.paddingMD * 2}px; align-items: stretch; text-align: start; min-height: 178px; > * { width: calc((100% - ${token.marginXXL * 2}px) / 3); } `, carousel, bannerBg: css` height: ${token.fontSize}px; `, }; }); interface RecommendItemProps { extra: Extra; index: number; icons: Icon[]; className?: string; } const RecommendItem: React.FC = ({ extra, index, icons, className }) => { const { styles } = useStyle(); if (!extra) { return ; } const icon = icons.find((i) => i.name === extra.source); const card = ( {extra?.title} {extra.description} {extra.date} {icon && banner} ); if (index === 0) { return ( {card} ); } return card; }; export const BannerRecommendsFallback: React.FC = () => { const { isMobile } = useContext(SiteContext); const { styles } = useStyle(); const list = new Array(3).fill(1); return isMobile ? ( {list.map((_, index) => (
))}
) : (
{list.map((_, index) => (
))}
); }; const BannerRecommends: React.FC = () => { const { styles } = useStyle(); const [, lang] = useLocale(); const { isMobile } = React.useContext(SiteContext); const data = useSiteData(); const extras = data?.extras?.[lang]; const icons = data?.icons || []; const first3 = !extras || extras.length === 0 ? new Array(3).fill(null) : extras.slice(0, 3); if (!data) { return ; } if (isMobile) { return ( {first3.map((extra, index) => (
))}
); } return (
{first3.map((extra, index) => ( ))}
); }; export default BannerRecommends;