import { LocalWorkspaceIcon, CloudWorkspaceIcon } from '@blocksuite/icons';
import { useAppState } from '@/providers/app-state-provider';
import { displayFlex, styled, Tooltip, IconButton } from '@affine/component';
import { useTranslation } from '@affine/i18n';
import { useModal } from '@/store/globalModal';
import { useEffect, useState } from 'react';
import { WorkspaceUnit } from '@affine/datacenter';
const NoNetWorkIcon = () => {
return (
);
};
const IconWrapper = styled.div(() => {
return {
width: '32px',
height: '32px',
marginRight: '12px',
fontSize: '22px',
...displayFlex('center', 'center'),
};
});
const getStatus = (workspace: WorkspaceUnit | null) => {
if (!navigator.onLine) {
return 'offline';
}
if (workspace?.provider === 'local') {
return 'local';
}
return 'cloud';
};
export const SyncUser = () => {
const { currentWorkspace } = useAppState();
const { triggerEnableWorkspaceModal } = useModal();
const [status, setStatus] = useState<'offline' | 'local' | 'cloud'>(
getStatus(currentWorkspace)
);
useEffect(() => {
const online = () => {
setStatus(getStatus(currentWorkspace));
};
const offline = () => {
setStatus('offline');
};
window.addEventListener('online', online);
window.addEventListener('offline', offline);
return () => {
window.removeEventListener('online', online);
window.removeEventListener('offline', offline);
};
}, [currentWorkspace]);
const { t } = useTranslation();
if (status === 'offline') {
return (
);
}
if (status === 'local') {
return (
{
triggerEnableWorkspaceModal();
}}
style={{ marginRight: '12px' }}
>
);
}
return (
);
};
export default SyncUser;