511e4e7db3
- Added comprehensive common translations (online/offline, success/error, etc.) - Localized status indicator component with all status states - Updated FileManagerLeftSidebar toast messages for rename/delete operations - Added translations for UI elements (close, toggle sidebar, etc.) - Expanded placeholder translations for form inputs - Added Chinese translations for all new common strings - Improved consistency across component status messages Co-Authored-By: Claude <noreply@anthropic.com>
67 lines
2.0 KiB
TypeScript
67 lines
2.0 KiB
TypeScript
import type { ComponentProps, HTMLAttributes } from 'react';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { cn } from '@/lib/utils';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
export type StatusProps = ComponentProps<typeof Badge> & {
|
|
status: 'online' | 'offline' | 'maintenance' | 'degraded';
|
|
};
|
|
|
|
export const Status = ({ className, status, ...props }: StatusProps) => (
|
|
<Badge
|
|
className={cn('flex items-center gap-2', 'group', status, className)}
|
|
variant="secondary"
|
|
{...props}
|
|
/>
|
|
);
|
|
|
|
export type StatusIndicatorProps = HTMLAttributes<HTMLSpanElement>;
|
|
|
|
export const StatusIndicator = ({
|
|
className,
|
|
...props
|
|
}: StatusIndicatorProps) => (
|
|
<span className="relative flex h-2 w-2" {...props}>
|
|
<span
|
|
className={cn(
|
|
'absolute inline-flex h-full w-full animate-ping rounded-full opacity-75',
|
|
'group-[.online]:bg-emerald-500',
|
|
'group-[.offline]:bg-red-500',
|
|
'group-[.maintenance]:bg-blue-500',
|
|
'group-[.degraded]:bg-amber-500'
|
|
)}
|
|
/>
|
|
<span
|
|
className={cn(
|
|
'relative inline-flex h-2 w-2 rounded-full',
|
|
'group-[.online]:bg-emerald-500',
|
|
'group-[.offline]:bg-red-500',
|
|
'group-[.maintenance]:bg-blue-500',
|
|
'group-[.degraded]:bg-amber-500'
|
|
)}
|
|
/>
|
|
</span>
|
|
);
|
|
|
|
export type StatusLabelProps = HTMLAttributes<HTMLSpanElement>;
|
|
|
|
export const StatusLabel = ({
|
|
className,
|
|
children,
|
|
...props
|
|
}: StatusLabelProps) => {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<span className={cn('text-muted-foreground', className)} {...props}>
|
|
{children ?? (
|
|
<>
|
|
<span className="hidden group-[.online]:block">{t('common.online')}</span>
|
|
<span className="hidden group-[.offline]:block">{t('common.offline')}</span>
|
|
<span className="hidden group-[.maintenance]:block">{t('common.maintenance')}</span>
|
|
<span className="hidden group-[.degraded]:block">{t('common.degraded')}</span>
|
|
</>
|
|
)}
|
|
</span>
|
|
);
|
|
};
|