57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
import { useAppTranslation } from '@features/localization/renderer';
|
|
|
|
import { useMemberWorkSyncStatus } from '../hooks/useMemberWorkSyncStatus';
|
|
|
|
import { MemberWorkSyncBadge } from './MemberWorkSyncBadge';
|
|
import { MemberWorkSyncDetails } from './MemberWorkSyncDetails';
|
|
|
|
import type React from 'react';
|
|
|
|
type MemberWorkSyncStatusPanelProps = Readonly<{
|
|
teamName: string;
|
|
memberName: string;
|
|
enabled?: boolean;
|
|
showDiagnostics?: boolean;
|
|
}>;
|
|
|
|
export function MemberWorkSyncStatusPanel({
|
|
teamName,
|
|
memberName,
|
|
enabled = true,
|
|
showDiagnostics = false,
|
|
}: MemberWorkSyncStatusPanelProps): React.ReactElement | null {
|
|
const { t } = useAppTranslation('team');
|
|
const { status, viewModel, loading, error } = useMemberWorkSyncStatus({
|
|
teamName,
|
|
memberName,
|
|
enabled,
|
|
});
|
|
|
|
if (!enabled) {
|
|
return null;
|
|
}
|
|
|
|
if (status) {
|
|
return <MemberWorkSyncDetails status={status} showDiagnostics={showDiagnostics} />;
|
|
}
|
|
|
|
return (
|
|
<section className="rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-raised)] p-3 text-sm">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div>
|
|
<h3 className="text-sm font-semibold text-[var(--color-text)]">
|
|
{t('memberWorkSync.title')}
|
|
</h3>
|
|
<p className="mt-1 text-xs text-[var(--color-text-muted)]">
|
|
{loading
|
|
? t('memberWorkSync.loadingDiagnostics')
|
|
: error
|
|
? t('memberWorkSync.diagnosticsUnavailable')
|
|
: viewModel.tooltip}
|
|
</p>
|
|
</div>
|
|
<MemberWorkSyncBadge viewModel={viewModel} />
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|