ant-design/.dumi/pages/index/index.tsx
afc163 59ad48476b
refactor: add boime lint and fix lint errrors ()
* chore: add boime lint

* fix lint

* use files ignore

* revert change

* ignore clarity.js

* fix some errors

* fix some errors

* fix some errors

* fix some errors

* add yml file

* Update clarity.js

Signed-off-by: afc163 <afc163@gmail.com>

* add npm run lint:biome

* add npm run lint:biome

* fix test case

* fix ts errors

* fix ts errors

* fix lint and add .lintstagedrc

* shorten prop name

* chore: update package.json

* update biome.json

* chore: remove stylelint

* chore: useOptionalChain

* fix lint

* biome format

* prettier all code

* prettier all code

* fix site test

---------

Signed-off-by: afc163 <afc163@gmail.com>
2024-06-22 21:59:12 +08:00

100 lines
2.7 KiB
TypeScript

import React, { Suspense } from 'react';
import { ConfigProvider, theme } from 'antd';
import { createStyles, css } from 'antd-style';
import useDark from '../../hooks/useDark';
import useLocale from '../../hooks/useLocale';
import BannerRecommends from './components/BannerRecommends';
import Group from './components/Group';
import PreviewBanner from './components/PreviewBanner';
const ComponentsList = React.lazy(() => import('./components/ComponentsList'));
const DesignFramework = React.lazy(() => import('./components/DesignFramework'));
const Theme = React.lazy(() => import('./components/Theme'));
const useStyle = createStyles(() => ({
image: css`
position: absolute;
left: 0;
top: -50px;
height: 160px;
`,
}));
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 { styles } = useStyle();
const { token } = theme.useToken();
const isRootDark = useDark();
return (
<section>
<PreviewBanner>
<BannerRecommends />
</PreviewBanner>
<div>
{/* 定制主题 */}
<ConfigProvider
theme={{
algorithm: theme.defaultAlgorithm,
}}
>
<Suspense fallback={null}>
<Theme />
</Suspense>
</ConfigProvider>
{/* 组件列表 */}
<Group
background={token.colorBgElevated}
collapse
title={locale.assetsTitle}
description={locale.assetsDesc}
id="design"
>
<Suspense fallback={null}>
<ComponentsList />
</Suspense>
</Group>
{/* 设计语言 */}
<Group
title={locale.designTitle}
description={locale.designDesc}
background={isRootDark ? 'rgb(57, 63, 74)' : '#F5F8FF'}
decoration={
<img
className={styles.image}
src="https://gw.alipayobjects.com/zos/bmw-prod/ba37a413-28e6-4be4-b1c5-01be1a0ebb1c.svg"
alt=""
/>
}
>
<Suspense fallback={null}>
<DesignFramework />
</Suspense>
</Group>
</div>
</section>
);
};
export default Homepage;