componenets standardization 1
This commit is contained in:
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user