WarningMessage Component

WarningMessage

This component provides WarningMessage functionality.

Props

• prop1: Description of prop1.
• prop2: Description of prop2.

Usage

import { WarningMessage } from './WarningMessage';

const props = {};

<WarningMessage prop1="value1" prop2="value2" />;

import type { FC, ReactNode } from 'react';

import cn from '../cn';

interface WarningMessageProps {
  title?: string;
  message?: ReactNode;
  className?: string;
}

export const WarningMessage: FC<WarningMessageProps> = ({
  title,
  message,
  className = ''
}) => {
  if (!message) {
    return null;
  }

  return (
    <div
      className={cn(
        'space-y-1 rounded-xl border-2 border-yellow-500/50 bg-yellow-50 p-4 dark:bg-yellow-900/10',
        className
      )}
    >
      {title ? (
        <h3 className="text-sm font-medium text-yellow-800 dark:text-yellow-200">
          {title}
        </h3>
      ) : null}
      <div className="text-sm text-yellow-700 dark:text-yellow-200">
        {message}
      </div>
    </div>
  );
};