componenets standardization 1

This commit is contained in:
IGNY8 VPS (Salman)
2026-01-01 21:42:04 +00:00
parent c880e24fc0
commit a4691ad2da
95 changed files with 3597 additions and 1745 deletions

View File

@@ -12,6 +12,8 @@ import {
CheckCircleIcon,
CloseIcon,
} from '../../icons';
import Button from '../ui/button/Button';
import IconButton from '../ui/button/IconButton';
export interface AttentionItem {
id: string;
@@ -80,9 +82,17 @@ export default function NeedsAttentionBar({ items, onDismiss }: NeedsAttentionBa
return (
<div className="mb-4">
{/* Header */}
<button
<Button
onClick={() => setIsCollapsed(!isCollapsed)}
className="w-full flex items-center justify-between px-5 py-3 bg-warning-50 dark:bg-warning-900/20 border border-warning-200 dark:border-warning-800 rounded-t-xl hover:bg-warning-100 dark:hover:bg-warning-900/30 transition-colors"
variant="ghost"
tone="warning"
fullWidth
className="flex items-center justify-between px-5 py-3 bg-warning-50 dark:bg-warning-900/20 border border-warning-200 dark:border-warning-800 rounded-t-xl hover:bg-warning-100 dark:hover:bg-warning-900/30"
endIcon={isCollapsed ? (
<ChevronDownIcon className="w-5 h-5 text-warning-600 dark:text-warning-400" />
) : (
<ChevronUpIcon className="w-5 h-5 text-warning-600 dark:text-warning-400" />
)}
>
<div className="flex items-center gap-2.5">
<AlertIcon className="w-5 h-5 text-warning-600 dark:text-warning-400" />
@@ -90,12 +100,7 @@ export default function NeedsAttentionBar({ items, onDismiss }: NeedsAttentionBa
Needs Attention ({items.length})
</span>
</div>
{isCollapsed ? (
<ChevronDownIcon className="w-5 h-5 text-warning-600 dark:text-warning-400" />
) : (
<ChevronUpIcon className="w-5 h-5 text-warning-600 dark:text-warning-400" />
)}
</button>
</Button>
{/* Content */}
{!isCollapsed && (
@@ -127,12 +132,14 @@ export default function NeedsAttentionBar({ items, onDismiss }: NeedsAttentionBa
{item.actionLabel}
</Link>
) : item.onAction ? (
<button
<Button
onClick={item.onAction}
className="text-sm font-medium text-brand-600 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300"
variant="ghost"
tone="brand"
size="xs"
>
{item.actionLabel}
</button>
</Button>
) : null}
{item.secondaryActionHref && (
<Link
@@ -145,12 +152,14 @@ export default function NeedsAttentionBar({ items, onDismiss }: NeedsAttentionBa
</div>
</div>
{onDismiss && (
<button
<IconButton
icon={<CloseIcon className="w-4 h-4" />}
onClick={() => onDismiss(item.id)}
className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
>
<CloseIcon className="w-4 h-4" />
</button>
variant="ghost"
tone="neutral"
size="sm"
aria-label="Dismiss"
/>
)}
</div>
);