import { css } from '@emotion/react'; import { Button, Space, Typography } from 'antd'; import { Link, useLocation } from 'dumi'; import * as React from 'react'; import useLocale from '../../../hooks/useLocale'; import useSiteToken from '../../../hooks/useSiteToken'; import SiteContext from '../../../theme/slots/SiteContext'; import * as utils from '../../../theme/utils'; import { GroupMask } from './Group'; 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 { token } = useSiteToken(); const { isMobile } = React.useContext(SiteContext); return { titleBase: css` h1& { font-family: AliPuHui, ${token.fontFamily}; } `, title: isMobile ? css` h1& { margin-bottom: ${token.margin}px; font-weight: normal; font-size: ${token.fontSizeHeading1 + 2}px; line-height: ${token.lineHeightHeading2}; } ` : css` h1& { margin-bottom: ${token.marginMD}px; font-weight: 900; font-size: 68px; } `, }; }; export interface BannerProps { children?: React.ReactNode; } export default function Banner({ children }: BannerProps) { const [locale] = useLocale(locales); const { pathname, search } = useLocation(); const { token } = useSiteToken(); const styles = useStyle(); const { isMobile } = React.useContext(SiteContext); const isZhCN = utils.isZhCN(pathname); return ( <> {/* Banner Placeholder Motion */} {isMobile ? ( ) : (
)} {/* Logo */}
{/* Image Bottom Right */} Ant Design {/* Image Left Top */} bg {/* Image Right Top */} bg Ant Design 5.0
{locale.slogan}
{children}
); }