Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory :  /home/gositeme/domains/lavocat.ca/public_html/src/components/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

import React from 'react';
import Link from 'next/link';
import { usePublicNotifications } from '@/context/PublicNotificationContext';

const CaseUpdateBanner: React.FC = () => {
  const { activeBanner, dismissBanner } = usePublicNotifications();

  if (!activeBanner) return null;

  const getBannerStyle = () => {
    switch (activeBanner.priority) {
      case 'urgent':
        return 'bg-gradient-to-r from-red-600 to-red-700 text-white border-red-500';
      case 'high':
        return 'bg-gradient-to-r from-orange-500 to-orange-600 text-white border-orange-400';
      case 'medium':
        return 'bg-gradient-to-r from-blue-500 to-blue-600 text-white border-blue-400';
      default:
        return 'bg-gradient-to-r from-gray-600 to-gray-700 text-white border-gray-500';
    }
  };

  const getIcon = () => {
    switch (activeBanner.priority) {
      case 'urgent':
        return '🚨';
      case 'high':
        return '📰';
      case 'medium':
        return 'ℹ️';
      default:
        return '📢';
    }
  };

  const getPulseAnimation = () => {
    return activeBanner.priority === 'urgent' ? 'animate-pulse' : '';
  };

  return (
    <>
      <div className={`fixed top-0 left-0 right-0 z-50 border-b-2 ${getBannerStyle()} ${getPulseAnimation()}`}>
        <div className="max-w-7xl mx-auto px-4 py-3">
          <div className="flex flex-col md:flex-row items-center justify-between gap-4">
            <div className="flex items-center space-x-3 flex-1">
              <div className="text-2xl">{getIcon()}</div>
              <div className="flex-1">
                <div className="font-bold text-lg">{activeBanner.title}</div>
                <div className="text-sm opacity-90">{activeBanner.message}</div>
              </div>
            </div>
            
            <div className="flex items-center space-x-4">
              {activeBanner.actionText && activeBanner.actionUrl && (
                <Link
                  href={activeBanner.actionUrl}
                  className="bg-white bg-opacity-20 hover:bg-opacity-30 text-white px-4 py-2 rounded-full font-semibold transition-all duration-200 hover:scale-105"
                >
                  {activeBanner.actionText}
                </Link>
              )}
              
              <button
                onClick={dismissBanner}
                className="text-white hover:text-gray-200 p-1 rounded-full hover:bg-white hover:bg-opacity-20 transition-all duration-200"
                aria-label="Close banner"
              >
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>
      {/* Spacer to push content down */}
      <div className="h-20"></div>
    </>
  );
};

export default CaseUpdateBanner;