50 lines
1.9 KiB
TypeScript
50 lines
1.9 KiB
TypeScript
import { useAppTranslation } from '@features/localization/renderer';
|
|
import { MemberLogsTab } from '@renderer/components/team/members/MemberLogsTab';
|
|
import { Loader2 } from 'lucide-react';
|
|
|
|
import type { ComponentProps } from 'react';
|
|
|
|
interface ExecutionSessionsSectionProps extends ComponentProps<typeof MemberLogsTab> {
|
|
isRefreshing?: boolean;
|
|
isPreviewOnline?: boolean;
|
|
}
|
|
|
|
export const ExecutionSessionsSection = ({
|
|
isRefreshing = false,
|
|
isPreviewOnline = false,
|
|
...props
|
|
}: ExecutionSessionsSectionProps): React.JSX.Element => {
|
|
const { t } = useAppTranslation('team');
|
|
return (
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2">
|
|
<h4 className="text-xs font-semibold uppercase tracking-[0.2em] text-[var(--color-text-muted)]">
|
|
{t('taskLogs.executionSessions.title')}
|
|
</h4>
|
|
{isRefreshing || isPreviewOnline ? (
|
|
<span className="flex items-center gap-2 text-[10px] text-[var(--color-text-muted)]">
|
|
{isPreviewOnline ? (
|
|
<span
|
|
className="pointer-events-none relative inline-flex size-2 shrink-0"
|
|
title={t('taskLogs.executionSessions.online')}
|
|
>
|
|
<span className="absolute inline-flex size-full animate-ping rounded-full bg-emerald-400 opacity-50" />
|
|
<span className="relative inline-flex size-2 rounded-full bg-emerald-400" />
|
|
</span>
|
|
) : null}
|
|
{isRefreshing ? (
|
|
<span className="flex items-center gap-1">
|
|
<Loader2 size={10} className="animate-spin" />
|
|
{t('taskLogs.executionSessions.updating')}
|
|
</span>
|
|
) : null}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
<p className="text-xs text-[var(--color-text-muted)]">
|
|
{t('taskLogs.executionSessions.description')}
|
|
</p>
|
|
<MemberLogsTab {...props} />
|
|
</div>
|
|
);
|
|
};
|