71 lines
1.7 KiB
TypeScript
71 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Info, AlertTriangle, CheckCircle, XCircle } from 'lucide-react';
|
|
|
|
type BannerType = 'info' | 'warning' | 'success' | 'error';
|
|
|
|
interface InfoBannerProps {
|
|
type?: BannerType;
|
|
title?: string;
|
|
children: React.ReactNode;
|
|
icon?: React.ElementType;
|
|
}
|
|
|
|
const bannerConfig: Record<BannerType, {
|
|
icon: React.ElementType;
|
|
bg: string;
|
|
border: string;
|
|
titleColor: string;
|
|
}> = {
|
|
info: {
|
|
icon: Info,
|
|
bg: 'bg-iron-gray/30',
|
|
border: 'border-charcoal-outline/50',
|
|
titleColor: 'text-gray-300',
|
|
},
|
|
warning: {
|
|
icon: AlertTriangle,
|
|
bg: 'bg-warning-amber/10',
|
|
border: 'border-warning-amber/30',
|
|
titleColor: 'text-warning-amber',
|
|
},
|
|
success: {
|
|
icon: CheckCircle,
|
|
bg: 'bg-performance-green/10',
|
|
border: 'border-performance-green/30',
|
|
titleColor: 'text-performance-green',
|
|
},
|
|
error: {
|
|
icon: XCircle,
|
|
bg: 'bg-racing-red/10',
|
|
border: 'border-racing-red/30',
|
|
titleColor: 'text-racing-red',
|
|
},
|
|
};
|
|
|
|
/**
|
|
* Info banner component for displaying contextual information, warnings, or notices.
|
|
* Used throughout the app for important messages and helper text.
|
|
*/
|
|
export default function InfoBanner({
|
|
type = 'info',
|
|
title,
|
|
children,
|
|
icon: CustomIcon,
|
|
}: InfoBannerProps) {
|
|
const config = bannerConfig[type];
|
|
const Icon = CustomIcon || config.icon;
|
|
|
|
return (
|
|
<div className={`flex items-start gap-3 p-4 rounded-lg border ${config.bg} ${config.border}`}>
|
|
<Icon className="w-5 h-5 text-gray-500 flex-shrink-0 mt-0.5" />
|
|
<div className="text-sm text-gray-400">
|
|
{title && (
|
|
<p className={`font-medium mb-1 ${config.titleColor}`}>{title}</p>
|
|
)}
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |