Function Alert

components/alert.tsx:40–95

({
  fullWidth = true,
  title,
  description,
  children,
  startAdornment,
  avatar,
  className,
  onClose,
  ...rest
}: AlertProps)

}

export function Alert({
  fullWidth = true,
  title,
  description,
  children,
  startAdornment,
  avatar,
  className,
  onClose,
  ...rest
}: AlertProps) {
  const labelId = useId();
  const contentId = useId();

  return (
    <div
      role='alert'
      aria-describedby={description ? contentId : undefined}
      aria-labelledby={title ? labelId : undefined}
      className={clsxMerge(alertVariants({ fullWidth }), className)}
      {...rest}
    >
      {(startAdornment ?? avatar) && (
        <div className='inline-flex items-start justify-start'>
          {!avatar && startAdornment}
          {!startAdornment && avatar && <Avatar {...avatar} />}
        </div>
      )}
      <div className='flex flex-1 flex-col items-start justify-center gap-3 overflow-hidden'>
        {title && (
          <p id={labelId} className='text-sm font-medium text-black'>
            {title}
          </p>
        )}
        {description && (
          <p id={contentId} className='text-xs font-normal leading-none text-slate-600'>
            {description}
          </p>
        )}
        <div>{children}</div>
      </div>
      {onClose && (
        <Button
          variant='text'
          size='small'
          className='h-auto min-w-0 text-slate-600'
          aria-label='Close'
          title='Close'
          iconOnly
        >
          <CloseIcon className='size-4' onClick={onClose} />
        </Button>
      )}
    </div>
  );
}

Alert.displayName = 'Alert';