index.tsx raw

   1  import { cn } from '@/lib/utils'
   2  import { CheckCircle2, Info, TriangleAlert } from 'lucide-react'
   3  
   4  const ICON_MAP = {
   5    info: <Info />,
   6    success: <CheckCircle2 />,
   7    alert: <TriangleAlert />
   8  }
   9  
  10  const VARIANT_STYLES = {
  11    info: 'bg-blue-100/20 dark:bg-blue-950/20 border border-blue-500 text-blue-500',
  12    success: 'bg-green-100/20 dark:bg-green-950/20 border border-green-500 text-green-500',
  13    alert: 'bg-amber-100/20 dark:bg-amber-950/20 border border-amber-500 text-amber-500'
  14  }
  15  
  16  export default function InfoCard({
  17    title,
  18    content,
  19    icon,
  20    variant = 'info'
  21  }: {
  22    title: string
  23    content?: string
  24    icon?: React.ReactNode
  25    variant?: 'info' | 'success' | 'alert'
  26  }) {
  27    return (
  28      <div className={cn('p-3 rounded-lg text-sm [&_svg]:size-4', VARIANT_STYLES[variant])}>
  29        <div className="flex items-center gap-2">
  30          {icon ?? ICON_MAP[variant]}
  31          <div className="font-medium">{title}</div>
  32        </div>
  33        {content && <div className="pl-6">{content}</div>}
  34      </div>
  35    )
  36  }
  37