website refactor
This commit is contained in:
@@ -3,36 +3,36 @@ import { Icon } from './Icon';
|
||||
import { LucideIcon } from 'lucide-react';
|
||||
import { Stack } from './primitives/Stack';
|
||||
|
||||
interface StatusBadgeProps {
|
||||
export interface StatusBadgeProps {
|
||||
children: React.ReactNode;
|
||||
variant?: 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'pending';
|
||||
className?: string;
|
||||
icon?: LucideIcon;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function StatusBadge({
|
||||
children,
|
||||
variant = 'success',
|
||||
className = '',
|
||||
icon,
|
||||
className
|
||||
}: StatusBadgeProps) {
|
||||
const variantClasses = {
|
||||
success: 'bg-performance-green/20 text-performance-green border-performance-green/30',
|
||||
warning: 'bg-warning-amber/20 text-warning-amber border-warning-amber/30',
|
||||
error: 'bg-red-600/20 text-red-400 border-red-600/30',
|
||||
info: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
|
||||
neutral: 'bg-iron-gray text-gray-400 border-charcoal-outline',
|
||||
pending: 'bg-warning-amber/20 text-warning-amber border-warning-amber/30',
|
||||
success: 'bg-[var(--ui-color-intent-success)]/20 text-[var(--ui-color-intent-success)] border-[var(--ui-color-intent-success)]/30',
|
||||
warning: 'bg-[var(--ui-color-intent-warning)]/20 text-[var(--ui-color-intent-warning)] border-[var(--ui-color-intent-warning)]/30',
|
||||
error: 'bg-[var(--ui-color-intent-critical)]/20 text-[var(--ui-color-intent-critical)] border-[var(--ui-color-intent-critical)]/30',
|
||||
info: 'bg-[var(--ui-color-intent-primary)]/20 text-[var(--ui-color-intent-primary)] border-[var(--ui-color-intent-primary)]/30',
|
||||
neutral: 'bg-[var(--ui-color-bg-surface-muted)] text-[var(--ui-color-text-med)] border-[var(--ui-color-border-default)]',
|
||||
pending: 'bg-[var(--ui-color-intent-warning)]/20 text-[var(--ui-color-intent-warning)] border-[var(--ui-color-intent-warning)]/30',
|
||||
};
|
||||
|
||||
const classes = [
|
||||
'px-2 py-0.5 text-xs rounded-full border font-medium inline-flex items-center',
|
||||
'px-2 py-0.5 text-[10px] uppercase tracking-wider rounded-full border font-bold inline-flex items-center',
|
||||
variantClasses[variant],
|
||||
className
|
||||
].filter(Boolean).join(' ');
|
||||
].join(' ');
|
||||
|
||||
const content = icon ? (
|
||||
<Stack direction="row" align="center" gap={1.5}>
|
||||
<Stack direction="row" align="center" gap={1}>
|
||||
<Icon icon={icon} size={3} />
|
||||
{children}
|
||||
</Stack>
|
||||
@@ -43,4 +43,4 @@ export function StatusBadge({
|
||||
{content}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user