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