import * as React from 'react'; import { createStyles, css, useTheme } from 'antd-style'; import classNames from 'classnames'; import type { FC } from 'react'; import { useContext } from 'react'; import { Typography, Skeleton, Carousel } from 'antd'; import type { Extra, Icon } from './util'; import SiteContext from '../../../theme/slots/SiteContext'; import { getCarouselStyle, useSiteData } from './util'; import useLocale from '../../../hooks/useLocale'; const useStyle = createStyles(({ token }) => { const { carousel } = getCarouselStyle(); return { 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; `, cardItem: css` width: 33%; &:hover { box-shadow: ${token.boxShadowCard}; } `, 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, }; }); interface RecommendItemProps { extra: Extra; index: number; icons: Icon[]; className?: string; } const RecommendItem = ({ extra, index, icons, className }: RecommendItemProps) => { const token = useTheme(); const { styles } = useStyle(); if (!extra) { return ; } const icon = icons.find((i) => i.name === extra.source); return ( {extra?.title} {extra.description}
{extra.date} {icon && banner}
); }; export const BannerRecommendsFallback: FC = () => { const { isMobile } = useContext(SiteContext); const { styles } = useStyle(); const list = Array(3).fill(1); return isMobile ? ( {list.map((extra, index) => (
))}
) : (
{list.map((_, index) => ( ))}
); }; export default function BannerRecommends() { 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.length === 0 ? Array(3).fill(null) : extras.slice(0, 3); return (
{isMobile ? ( {first3.map((extra, index) => (
))}
) : (
{first3.map((extra, index) => ( ))}
)}
); }