24 lines
1.2 KiB
TypeScript
24 lines
1.2 KiB
TypeScript
import { Card } from '../ui'
|
|
import { t } from '@/lib/i18n'
|
|
import { useSyncProgressBarController } from './controller'
|
|
import { SyncDateRange, SyncErrorBanner, SyncProgressSection, SyncResyncButton, SyncStatusMessage } from './view'
|
|
|
|
export function SyncProgressBar(): React.ReactElement | null {
|
|
const controller = useSyncProgressBarController()
|
|
if (!controller) {
|
|
return null
|
|
}
|
|
return (
|
|
<Card variant="default" className="bg-cyber-darker mt-6">
|
|
<SyncErrorBanner error={controller.error} onDismiss={controller.dismissError} />
|
|
<div className="flex items-center justify-between mb-2">
|
|
<h3 className="text-lg font-semibold text-neon-cyan">{t('settings.sync.title')}</h3>
|
|
<SyncResyncButton isSyncing={controller.isSyncing} onClick={controller.onResyncClick} />
|
|
</div>
|
|
<SyncDateRange totalDays={controller.totalDays} startDate={controller.startDateLabel} endDate={controller.endDateLabel} />
|
|
<SyncProgressSection isSyncing={controller.isSyncing} syncProgress={controller.syncProgress} progressPercentage={controller.progressPercentage} />
|
|
<SyncStatusMessage isSyncing={controller.isSyncing} totalDays={controller.totalDays} isRecentlySynced={controller.isRecentlySynced} />
|
|
</Card>
|
|
)
|
|
}
|