website refactor

This commit is contained in:
2026-01-18 21:31:08 +01:00
parent 502d4aa092
commit b43a23a48c
96 changed files with 3461 additions and 4067 deletions

View File

@@ -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>
);
}
}