import React from 'react'; import RcFooter from 'rc-footer'; import { Link, FormattedMessage } from 'dumi'; import type { FooterColumn } from 'rc-footer/lib/column'; import { AntDesignOutlined, BgColorsOutlined, BugOutlined, GithubOutlined, HistoryOutlined, IssuesCloseOutlined, MediumOutlined, ProfileOutlined, QuestionCircleOutlined, TwitterOutlined, UsergroupAddOutlined, ZhihuOutlined, YuqueFilled, } from '@ant-design/icons'; import { css } from '@emotion/react'; import { TinyColor } from '@ctrl/tinycolor'; import getAlphaColor from 'antd/es/theme/util/getAlphaColor'; import useLocation from '../../../hooks/useLocation'; import useLocale from '../../../hooks/useLocale'; import useSiteToken from '../../../hooks/useSiteToken'; import AdditionalInfo from './AdditionalInfo'; const locales = { cn: { owner: '蚂蚁集团和 Ant Design 开源社区', }, en: { owner: 'Ant Group and Ant Design Community', }, }; const useStyle = () => { const { token } = useSiteToken(); const background = new TinyColor(getAlphaColor('#f0f3fa', '#fff')) .onBackground(token.colorBgContainer) .toHexString(); return { holder: css` background: ${background}; `, footer: css` background: ${background}; color: ${token.colorTextSecondary}; box-shadow: inset 0 106px 36px -116px rgba(0, 0, 0, 0.14); * { box-sizing: border-box; } h2, a { color: ${token.colorText}; } .rc-footer-column { margin-bottom: 0; } .rc-footer-container { max-width: 1208px; margin-inline: auto; padding-inline: ${token.marginXXL}px; } .rc-footer-bottom { font-size: ${token.fontSize}px; box-shadow: inset 0 106px 36px -116px rgba(0, 0, 0, 0.14); } `, }; }; const Footer = () => { const location = useLocation(); const [locale, lang] = useLocale(locales); const style = useStyle(); const { getLink } = location; const getColumns = React.useMemo(() => { const isZhCN = lang === 'cn'; const col1 = { title: , items: [ { title: 'Ant Design Charts', url: 'https://charts.ant.design', openExternal: true, }, { title: 'Ant Design Pro', url: 'https://pro.ant.design', openExternal: true, }, { title: 'Ant Design Pro Components', url: 'https://procomponents.ant.design', openExternal: true, }, { title: 'Ant Design Mobile', url: 'https://mobile.ant.design', openExternal: true, }, { title: 'Ant Design Landing', description: , url: 'https://landing.ant.design', openExternal: true, }, { title: 'Scaffolds', description: , url: 'https://scaffold.ant.design', openExternal: true, }, { title: 'Umi', description: , url: 'https://umijs.org', openExternal: true, }, { title: 'dumi', description: , url: 'https://d.umijs.org', openExternal: true, }, { title: 'qiankun', description: , url: 'https://qiankun.umijs.org', openExternal: true, }, { title: 'ahooks', description: , url: 'https://github.com/alibaba/hooks', openExternal: true, }, { title: 'Ant Motion', description: , url: 'https://motion.ant.design', openExternal: true, }, { title: , url: 'https://ant-design.gitee.io/', }, ], }; const col2 = { title: , items: [ { icon: , title: , url: 'https://github.com/websemantics/awesome-ant-design', openExternal: true, }, { icon: , title: 'Medium', url: 'http://medium.com/ant-design/', openExternal: true, }, { icon: , title: 'Twitter', url: 'http://twitter.com/antdesignui', openExternal: true, }, { icon: , title: , url: 'https://yuque.com/ant-design/ant-design', openExternal: true, }, { icon: , title: , url: 'https://www.zhihu.com/column/c_1564262000561106944', openExternal: true, }, { icon: , title: , url: 'http://zhuanlan.zhihu.com/xtech', openExternal: true, }, { icon: ( seeconf ), title: 'SEE Conf', description: , url: 'https://seeconf.antfin.com/', openExternal: true, }, ], }; if (isZhCN) { col2.items.push({ icon: , title: , url: getLink('/docs/resources', { cn: '加入我们', en: 'JoinUs', }), LinkComponent: Link, } as unknown as typeof col2['items'][number]); } const col3 = { title: , items: [ { icon: , title: 'GitHub', url: 'https://github.com/ant-design/ant-design', openExternal: true, }, { icon: , title: , url: getLink('/changelog'), LinkComponent: Link, }, { icon: , title: , url: getLink('/docs/react/faq'), LinkComponent: Link, }, { icon: , title: , url: 'https://new-issue.ant.design/', openExternal: true, }, { icon: , title: , url: 'https://github.com/ant-design/ant-design/issues', openExternal: true, }, { icon: , title: , url: 'https://github.com/ant-design/ant-design/discussions', openExternal: true, }, { icon: , title: , url: 'http://stackoverflow.com/questions/tagged/antd', openExternal: true, }, { icon: , title: , url: 'https://segmentfault.com/t/antd', openExternal: true, }, ], }; const col4 = { icon: ( Ant XTech ), title: , items: [ { icon: ( yuque ), title: , url: 'https://yuque.com', description: , openExternal: true, }, { icon: ( AntV ), title: 'AntV', url: 'https://antv.vision', description: , openExternal: true, }, { icon: ( Egg ), title: 'Egg', url: 'https://eggjs.org', description: , openExternal: true, }, { icon: ( kitchen ), title: 'Kitchen', description: , url: 'https://kitchen.alipay.com', openExternal: true, }, { icon: ( xtech ), title: , url: 'https://xtech.antfin.com/', openExternal: true, }, { icon: , title: , url: getLink('/theme-editor'), LinkComponent: Link, }, ], }; return [col1, col2, col3, col4]; }, [lang, location.search]); return ( <> Made with by {locale.owner} } /> ); }; export default Footer;