File "alert.js"

Full Path: /home/fresvfqn/waterdamagerestorationandrepairsmithtown.com/wp-content/plugins/surerank/src/global/components/alert/alert.js
File size: 2.81 KB
MIME-type: text/x-java
Charset: utf-8

import { Text } from '@bsf/force-ui';
import { AlertTriangleIcon, Check, InfoIcon } from 'lucide-react';
import { cn } from '@/functions/utils';

/**
 * Alert component displays a success message with title and description
 * Based on the Figma design: Status=Success, High contrast=False, Type=Inline long
 *
 * @param {Object}                             props           - Component props
 * @param {string}                             props.title     - The title/heading of the alert
 * @param {string}                             props.message   - The message/description content
 * @param {boolean}                            props.showIcon  - Whether to show the success icon (default: false)
 * @param {string}                             props.className - Additional CSS classes
 * @param {'success'|'error'|'warning'|'info'} props.color     - Color variant for the alert (default: 'primary')
 * @param {JSX.Element}                        props.footer    - Footer content
 * @return {JSX.Element} Alert component
 */
const Alert = ( {
	title = '',
	message = '',
	showIcon = false,
	className = '',
	color = 'success',
	footer = null,
	...props
} ) => {
	const borderColorClass =
		{
			success: 'border-alert-border-green',
			error: 'border-alert-border-danger',
			warning: 'border-alert-border-warning',
			info: 'border-alert-border-info',
		}[ color ] || 'border-alert-border-green';

	const backgroundColorClass =
		{
			success: 'bg-alert-background-green',
			error: 'bg-alert-background-danger',
			warning: 'bg-alert-background-warning',
			info: 'bg-alert-background-info',
		}[ color ] || 'bg-alert-background-green';

	const iconColorClass =
		{
			success: 'text-support-success',
			error: 'text-support-error',
			warning: 'text-support-warning',
			info: 'text-support-info',
		}[ color ] || 'text-support-success';

	const Icon =
		{
			success: Check,
			error: AlertTriangleIcon,
			warning: AlertTriangleIcon,
			info: InfoIcon,
		}[ color ] || Check;

	return (
		<div
			className={ cn(
				'flex flex-row self-stretch gap-2 p-3 border border-solid rounded-lg',
				borderColorClass,
				backgroundColorClass,
				className
			) }
			role="alert"
			{ ...props }
		>
			{ showIcon && (
				<Icon
					className={ cn( iconColorClass, 'shrink-0' ) }
					size={ 20 }
				/>
			) }
			<div className="flex flex-col gap-3 pl-1 pr-5 py-0 flex-1">
				<div className="flex flex-col justify-center self-stretch gap-0.5">
					{ title && (
						<Text
							size={ 14 }
							weight={ 600 }
							color="primary"
							className="leading-[1.43]"
						>
							{ title }
						</Text>
					) }
					{ message && (
						<Text
							size={ 14 }
							weight={ 400 }
							color="primary"
							className="self-stretch"
						>
							{ message }
						</Text>
					) }
				</div>
				{ footer }
			</div>
		</div>
	);
};

export default Alert;