agent-ecosystem/src/renderer/components/team/dialogs/LaunchTeamDialogLoadingFallback.tsx

86 lines
2.6 KiB
TypeScript

import React from 'react';
import { useAppTranslation } from '@features/localization/renderer';
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
} from '@renderer/components/ui/dialog';
import { Loader2 } from 'lucide-react';
type LaunchTeamDialogLoadingMode = 'launch' | 'relaunch' | 'schedule';
interface LaunchTeamDialogLoadingFallbackProps {
readonly mode: LaunchTeamDialogLoadingMode;
readonly teamName?: string;
readonly isEditingSchedule?: boolean;
readonly onClose: () => void;
}
export const LaunchTeamDialogLoadingFallback = ({
mode,
teamName,
isEditingSchedule = false,
onClose,
}: LaunchTeamDialogLoadingFallbackProps): React.JSX.Element => {
const { t } = useAppTranslation('team');
const { t: tCommon } = useAppTranslation('common');
const title =
mode === 'schedule'
? isEditingSchedule
? t('launch.title.editSchedule')
: t('launch.title.createSchedule')
: mode === 'relaunch'
? t('launch.title.relaunch')
: t('launch.title.launch');
const description =
mode === 'schedule'
? isEditingSchedule && teamName
? t('launch.description.editSchedule', { team: teamName })
: teamName
? t('launch.description.createScheduleForTeam', { team: teamName })
: t('launch.description.createSchedule')
: mode === 'relaunch'
? t('launch.description.relaunchPrefix')
: t('launch.description.launchPrefix');
return (
<Dialog
open
onOpenChange={(nextOpen) => {
if (!nextOpen) {
onClose();
}
}}
>
<DialogContent className="max-w-[52rem]">
<DialogHeader>
<DialogTitle className="text-sm">{title}</DialogTitle>
<DialogDescription className="text-xs">
{mode === 'schedule' ? (
description
) : (
<>
{description} <span className="font-mono font-medium">{teamName}</span>{' '}
{mode === 'relaunch'
? t('launch.description.relaunchSuffix')
: t('launch.description.launchSuffix')}
</>
)}
</DialogDescription>
</DialogHeader>
<div
className="flex items-center gap-2 rounded-md border border-[var(--color-border)] bg-[var(--color-surface-overlay)] px-3 py-2 text-xs text-[var(--color-text-muted)]"
aria-live="polite"
>
<Loader2 className="size-3.5 shrink-0 animate-spin" />
<span>{tCommon('states.loading')}</span>
</div>
</DialogContent>
</Dialog>
);
};