All files / src/components MasqueradeBanner.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react';
import { useTranslation } from 'react-i18next';
import { Eye, XCircle } from 'lucide-react';
import { User } from '../types';
 
interface MasqueradeBannerProps {
  effectiveUser: User;
  originalUser: User;
  previousUser: User | null;
  onStop: () => void;
}
 
const MasqueradeBanner: React.FC<MasqueradeBannerProps> = ({ effectiveUser, originalUser, previousUser, onStop }) => {
  const { t } = useTranslation();
 
  const buttonText = previousUser ? t('platform.masquerade.returnTo', { name: previousUser.name }) : t('platform.masquerade.stopMasquerading');
 
  return (
    <div className="bg-orange-600 text-white px-4 py-2 shadow-md flex items-center justify-between z-50 relative">
      <div className="flex items-center gap-3">
        <div className="p-1.5 bg-white/20 rounded-full animate-pulse">
          <Eye size={18} />
        </div>
        <span className="text-sm font-medium">
          {t('platform.masquerade.masqueradingAs')} <strong>{effectiveUser.name}</strong> ({effectiveUser.role})
          <span className="opacity-75 mx-2 text-xs">|</span>
          {t('platform.masquerade.loggedInAs', { name: originalUser.name })}
        </span>
      </div>
      <button 
        onClick={onStop}
        className="flex items-center gap-2 px-3 py-1 text-xs font-bold uppercase bg-white text-orange-600 rounded hover:bg-orange-50 transition-colors"
      >
        <XCircle size={14} />
        {buttonText}
      </button>
    </div>
  );
};
 
export default MasqueradeBanner;