58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import { cn } from '@/lib/utils';
|
|
import { STATUS_COLORS } from '@/lib/constants';
|
|
import type { ProjectStatus } from '@/types/database';
|
|
|
|
interface StatusBadgeProps {
|
|
status: ProjectStatus;
|
|
size?: 'sm' | 'md' | 'lg';
|
|
showLabel?: boolean;
|
|
}
|
|
|
|
export function StatusBadge({ status, size = 'md', showLabel = true }: StatusBadgeProps) {
|
|
const colors = STATUS_COLORS[status];
|
|
const sizeClasses = {
|
|
sm: 'h-2 w-2',
|
|
md: 'h-3 w-3',
|
|
lg: 'h-4 w-4',
|
|
};
|
|
|
|
return (
|
|
<div className="flex items-center gap-1.5">
|
|
<div className={cn('rounded-full', sizeClasses[size], colors.bg, 'ring-2', colors.border.replace('border', 'ring'))} />
|
|
{showLabel && (
|
|
<span className={cn('text-sm font-medium', colors.text)}>
|
|
{colors.label}
|
|
</span>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface StatusDotProps {
|
|
status: ProjectStatus;
|
|
size?: 'sm' | 'md' | 'lg';
|
|
pulse?: boolean;
|
|
}
|
|
|
|
export function StatusDot({ status, size = 'md', pulse = false }: StatusDotProps) {
|
|
const colors = STATUS_COLORS[status];
|
|
const sizeClasses = {
|
|
sm: 'h-2 w-2',
|
|
md: 'h-3 w-3',
|
|
lg: 'h-4 w-4',
|
|
};
|
|
|
|
const bgColor = status === 'green' ? 'bg-emerald-500' : status === 'yellow' ? 'bg-amber-500' : 'bg-rose-500';
|
|
|
|
return (
|
|
<span className="relative flex">
|
|
{pulse && status !== 'green' && (
|
|
<span className={cn('animate-ping absolute inline-flex h-full w-full rounded-full opacity-75', bgColor)} />
|
|
)}
|
|
<span className={cn('relative inline-flex rounded-full', sizeClasses[size], bgColor)} />
|
|
</span>
|
|
);
|
|
}
|