All files / components/Chat ChatToggle.js

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
44
45
46
47
 
 
2x
 
 
 
 
 
 
 
 
 
 
2x
 
 
 
 
 
 
2x
 
 
 
 
 
 
 
 
2x
 
 
 
49x
 
 
 
 
 
 
 
 
 
 
 
 
 
import Button from "react-bootstrap/Button";
 
const chatContainerStyle = {
    width: '40px',
    height: '40px',
    borderRadius: '50%',
    backgroundColor: 'lightblue',
    color: 'black',
    position: 'fixed',
    bottom: '20px',
    right: '20px',
  };
 
const chatOpenSymbol = (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-5 h-5">
<path fillRule="evenodd" d="M3.43 2.524A41.29 41.29 0 0110 2c2.236 0 4.43.18 6.57.524 1.437.231 2.43 1.49 2.43 2.902v5.148c0 1.413-.993 2.67-2.43 2.902a41.202 41.202 0 01-5.183.501.78.78 0 00-.528.224l-3.579 3.58A.75.75 0 016 17.25v-3.443a41.033 41.033 0 01-2.57-.33C1.993 13.244 1 11.986 1 10.573V5.426c0-1.413.993-2.67 2.43-2.902z" clipRule="evenodd" 
role = "img" 
alt = "Chat open symbol"
/>
    </svg>);
 
const chatCloseSymbol = (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-5 h-5">
<path d="M3.505 2.365A41.369 41.369 0 019 2c1.863 0 3.697.124 5.495.365 1.247.167 2.18 1.108 2.435 2.268a4.45 4.45 0 00-.577-.069 43.141 43.141 0 00-4.706 0C9.229 4.696 7.5 6.727 7.5 8.998v2.24c0 1.413.67 2.735 1.76 3.562l-2.98 2.98A.75.75 0 015 17.25v-3.443c-.501-.048-1-.106-1.495-.172C2.033 13.438 1 12.162 1 10.72V5.28c0-1.441 1.033-2.717 2.505-2.914z" />
<path d="M14 6c-.762 0-1.52.02-2.271.062C10.157 6.148 9 7.472 9 8.998v2.24c0 1.519 1.147 2.839 2.71 2.935.214.013.428.024.642.034.2.009.385.09.518.224l2.35 2.35a.75.75 0 001.28-.531v-2.07c1.453-.195 2.5-1.463 2.5-2.915V8.998c0-1.526-1.157-2.85-2.729-2.936A41.645 41.645 0 0014 6z" 
role = "img"
alt = "Chat close symbol"
/>
</svg>
)
 
const ChatToggle = ({ toggleChatWindow, isChatOpen}) => 
{
    
    
    return (
        <Button
            style={chatContainerStyle}
            onClick={toggleChatWindow}
            data-testid="ChatToggle"
        >
            {isChatOpen? chatOpenSymbol: chatCloseSymbol}
 
        </Button>
    );
}
 
export default ChatToggle;