mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-13 15:49:10 +08:00
36abb3df4e
* chore: merge context * chore: theme context * chore(site): improve site * chore: update components overview url * chore: update * chore: remove default theme button * chore: update * chore: update
79 lines
2.4 KiB
TypeScript
79 lines
2.4 KiB
TypeScript
import React from 'react';
|
|
import { useLocale as useDumiLocale } from 'dumi';
|
|
import { ConfigProvider } from 'antd';
|
|
import useLocale from '../../hooks/useLocale';
|
|
import Banner from './components/Banner';
|
|
import Group from './components/Group';
|
|
import { useSiteData } from './components/util';
|
|
import Theme from './components/Theme';
|
|
import BannerRecommends from './components/BannerRecommends';
|
|
import ComponentsList from './components/ComponentsList';
|
|
import DesignFramework from './components/DesignFramework';
|
|
|
|
const locales = {
|
|
cn: {
|
|
assetsTitle: '组件丰富,选用自如',
|
|
assetsDesc: '大量实用组件满足你的需求,灵活定制与拓展',
|
|
|
|
designTitle: '设计语言与研发框架',
|
|
designDesc: '配套生态,让你快速搭建网站应用',
|
|
},
|
|
en: {
|
|
assetsTitle: 'Rich components',
|
|
assetsDesc: 'Practical components to meet your needs, flexible customization and expansion',
|
|
|
|
designTitle: 'Design and framework',
|
|
designDesc: 'Supporting ecology, allowing you to quickly build website applications',
|
|
},
|
|
};
|
|
|
|
const Homepage: React.FC = () => {
|
|
const [locale] = useLocale(locales);
|
|
const { id: localeId } = useDumiLocale();
|
|
const localeStr = localeId === 'zh-CN' ? 'cn' : 'en';
|
|
|
|
const [siteData] = useSiteData();
|
|
|
|
return (
|
|
<ConfigProvider theme={{ algorithm: undefined }}>
|
|
<section>
|
|
<Banner>
|
|
<BannerRecommends extras={siteData?.extras?.[localeStr]} icons={siteData?.icons} />
|
|
</Banner>
|
|
|
|
<div>
|
|
<Theme />
|
|
<Group
|
|
background="#fff"
|
|
collapse
|
|
title={locale.assetsTitle}
|
|
description={locale.assetsDesc}
|
|
id="design"
|
|
>
|
|
<ComponentsList />
|
|
</Group>
|
|
<Group
|
|
title={locale.designTitle}
|
|
description={locale.designDesc}
|
|
background="#F5F8FF"
|
|
decoration={
|
|
<>
|
|
{/* Image Left Top */}
|
|
<img
|
|
style={{ position: 'absolute', left: 0, top: -50, height: 160 }}
|
|
src="https://gw.alipayobjects.com/zos/bmw-prod/ba37a413-28e6-4be4-b1c5-01be1a0ebb1c.svg"
|
|
alt=""
|
|
/>
|
|
</>
|
|
}
|
|
>
|
|
<DesignFramework />
|
|
</Group>
|
|
</div>
|
|
</section>
|
|
</ConfigProvider>
|
|
);
|
|
};
|
|
|
|
export default Homepage;
|