60 lines
1.4 KiB
TypeScript
60 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
SyncAlt,
|
|
Favorite,
|
|
Settings,
|
|
Info,
|
|
Search,
|
|
AutoFixHigh,
|
|
Image,
|
|
Psychology,
|
|
Build,
|
|
} from '@mui/icons-material';
|
|
import { styled } from '@mui/material/styles';
|
|
import * as Types from 'types/types';
|
|
import { Box } from '@mui/material';
|
|
|
|
interface StatusIconProps {
|
|
type: Types.ApiActivityType;
|
|
}
|
|
|
|
const StatusBox = styled(Box)(({ theme }) => ({
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: theme.spacing(1),
|
|
padding: theme.spacing(1, 2),
|
|
backgroundColor: theme.palette.background.paper,
|
|
borderRadius: theme.shape.borderRadius,
|
|
border: `1px solid ${theme.palette.divider}`,
|
|
minHeight: 48,
|
|
}));
|
|
|
|
const StatusIcon = (props: StatusIconProps) => {
|
|
const { type } = props;
|
|
|
|
switch (type) {
|
|
case 'converting':
|
|
return <SyncAlt color="primary" />;
|
|
case 'heartbeat':
|
|
return <Favorite color="error" />;
|
|
case 'system':
|
|
return <Settings color="action" />;
|
|
case 'info':
|
|
return <Info color="info" />;
|
|
case 'searching':
|
|
return <Search color="primary" />;
|
|
case 'generating':
|
|
return <AutoFixHigh color="secondary" />;
|
|
case 'generating_image':
|
|
return <Image color="primary" />;
|
|
case 'thinking':
|
|
return <Psychology color="secondary" />;
|
|
case 'tooling':
|
|
return <Build color="action" />;
|
|
default:
|
|
return <Info color="action" />;
|
|
}
|
|
};
|
|
|
|
export { StatusIcon, StatusBox };
|