You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
import { Icon } from '@lobehub/ui';
|
|
import { Progress, Typography } from 'antd';
|
|
import { useTheme } from 'antd-style';
|
|
import { Loader2 } from 'lucide-react';
|
|
import { ReactNode, memo } from 'react';
|
|
import { Center, Flexbox } from 'react-layout-kit';
|
|
|
|
export interface StageObjectItem {
|
|
icon?: ReactNode;
|
|
text: string;
|
|
}
|
|
export type StageItem = string | StageObjectItem;
|
|
|
|
interface InitingProps {
|
|
activeStage: number;
|
|
stages: StageItem[];
|
|
}
|
|
|
|
const InitProgress = memo<InitingProps>(({ activeStage, stages }) => {
|
|
const theme = useTheme();
|
|
|
|
const outStage = stages[activeStage];
|
|
const percent = (activeStage / (stages.length - 1)) * 100;
|
|
|
|
const stage = typeof outStage === 'string' ? { text: outStage } : outStage;
|
|
|
|
return (
|
|
<Center gap={8} width={180}>
|
|
<Progress
|
|
percent={parseInt(percent.toFixed(0))}
|
|
showInfo={false}
|
|
strokeColor={'#fff'}
|
|
/>
|
|
<Flexbox align={'center'} gap={4} horizontal>
|
|
{stage?.icon ? stage?.icon : <Icon icon={Loader2} spin />}
|
|
<Typography.Text type={'secondary'} style={{color:'#fff'}}>{stage?.text}</Typography.Text>
|
|
</Flexbox>
|
|
</Center>
|
|
);
|
|
});
|
|
|
|
export default InitProgress;
|