import React, { Suspense } from 'react'; import { Button, ConfigProvider, Flex, Typography } from 'antd'; import { createStyles } from 'antd-style'; import { useLocation } from 'dumi'; import useLocale from '../../../../hooks/useLocale'; import Link from '../../../../theme/common/Link'; import SiteContext from '../../../../theme/slots/SiteContext'; import * as utils from '../../../../theme/utils'; import GroupMaskLayer from '../GroupMaskLayer'; const ComponentsBlock = React.lazy(() => import('./ComponentsBlock')); const locales = { cn: { slogan: '助力设计开发者「更灵活」地搭建出「更美」的产品,让用户「快乐工作」~', start: '开始使用', designLanguage: '设计语言', }, en: { slogan: 'Help designers/developers building beautiful products more flexible and working with happiness', start: 'Getting Started', designLanguage: 'Design Language', }, }; const useStyle = () => { const { direction } = React.useContext(ConfigProvider.ConfigContext); const isRTL = direction === 'rtl'; return createStyles(({ token, css, cx }) => { const textShadow = `0 0 4px ${token.colorBgContainer}`; const mask = cx(css` position: absolute; inset: 0; backdrop-filter: blur(4px); opacity: 1; background-color: rgba(255, 255, 255, 0.2); transition: all 1s ease; pointer-events: none; `); return { holder: css` height: 640px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; perspective: 800px; /* fix safari bug by removing blur style */ transform: translateZ(1000px); row-gap: ${token.marginXL}px; &:hover .${mask} { opacity: 0; } `, mask, typography: css` text-align: center; position: relative; z-index: 1; padding-inline: ${token.paddingXL}px; text-shadow: ${new Array(5) .fill(null) .map(() => textShadow) .join(', ')}; h1 { font-family: AliPuHui, ${token.fontFamily} !important; font-weight: 900 !important; font-size: ${token.fontSizeHeading2 * 2}px !important; line-height: ${token.lineHeightHeading2} !important; } p { font-size: ${token.fontSizeLG}px !important; font-weight: normal !important; margin-bottom: 0; } `, block: css` position: absolute; inset-inline-end: 0; top: -38px; transform: ${isRTL ? 'rotate3d(24, 83, -45, 57deg)' : 'rotate3d(24, -83, 45, 57deg)'}; `, child: css` position: relative; width: 100%; max-width: 1200px; margin: 0 auto; z-index: 1; `, btnWrap: css` margin-bottom: ${token.marginXL}px; `, }; })(); }; const PreviewBanner: React.FC<React.PropsWithChildren> = (props) => { const { children } = props; const [locale] = useLocale(locales); const { styles } = useStyle(); const { isMobile } = React.useContext(SiteContext); const { pathname, search } = useLocation(); const isZhCN = utils.isZhCN(pathname); return ( <GroupMaskLayer> {/* Image Left Top */} <img style={{ position: 'absolute', left: isMobile ? -120 : 0, top: 0, width: 240 }} src="https://gw.alipayobjects.com/zos/bmw-prod/49f963db-b2a8-4f15-857a-270d771a1204.svg" alt="bg" /> {/* Image Right Top */} <img style={{ position: 'absolute', right: isMobile ? 0 : '40%', bottom: 120, width: 240 }} src="https://gw.alipayobjects.com/zos/bmw-prod/e152223c-bcae-4913-8938-54fda9efe330.svg" alt="bg" /> <div className={styles.holder}> {/* Mobile not show the component preview */} <Suspense fallback={null}> {isMobile ? null : ( <div className={styles.block}> <ComponentsBlock /> </div> )} </Suspense> <div className={styles.mask} /> <Typography className={styles.typography}> <h1>Ant Design 5.0</h1> <p>{locale.slogan}</p> </Typography> <Flex gap="middle" className={styles.btnWrap}> <Link to={utils.getLocalizedPathname('/components/overview/', isZhCN, search)}> <Button size="large" type="primary"> {locale.start} </Button> </Link> <Link to={utils.getLocalizedPathname('/docs/spec/introduce/', isZhCN, search)}> <Button size="large">{locale.designLanguage}</Button> </Link> </Flex> <div className={styles.child}>{children}</div> </div> </GroupMaskLayer> ); }; export default PreviewBanner;