-
-
Save Hussain-Safwan/3041af753f7013ce7c81c2ba4f525981 to your computer and use it in GitHub Desktop.
Popchat source code
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#chatCon { | |
width: 20%; | |
position: absolute; | |
bottom: 3%; | |
right: 3%; | |
} | |
#chatCon .chat-box { | |
/* display: none; */ | |
width: 100%; | |
height: 500px; | |
border-radius: 25px; | |
background-color: #eee; | |
} | |
#chatCon .chat-box .header { | |
background-color: #3fda73; | |
padding: 15px; | |
border-radius: 20px 20px 0 0; | |
color: #fff; | |
font-size: 20px; | |
} | |
#chatCon .chat-box .msg-area { | |
overflow: hidden; | |
height: 370px; | |
padding: 15px; | |
} | |
#chatCon .chat-box .msg-area .left span { | |
display: inline-block; | |
font-size: 17.5px; | |
border-radius: 15px; | |
padding: 15px; | |
background-color: #ddd; | |
} | |
#chatCon .chat-box .msg-area .right { | |
text-align: right; | |
} | |
#chatCon .chat-box .msg-area .right span { | |
display: inline-block; | |
font-size: 17.5px; | |
border-radius: 15px; | |
padding: 15px; | |
background-color: #ddd; | |
} | |
#chatCon .chat-box .footer { | |
padding: 0 20px; | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-box-pack: justify; | |
-ms-flex-pack: justify; | |
justify-content: space-between; | |
} | |
#chatCon .chat-box .footer input { | |
border: 1px solid #fff; | |
padding: 10px; | |
width: 80%; | |
border-radius: 15px; | |
} | |
#chatCon .chat-box .footer input:foucs { | |
outline: none; | |
} | |
#chatCon .chat-box .footer button { | |
border: none; | |
font-size: 22.5px; | |
color: lightgreen; | |
cursor: pointer; | |
} | |
#chatCon .pop { | |
width: 100%; | |
height: 25%; | |
cursor: pointer; | |
} | |
#chatCon .pop p { | |
text-align: right; | |
} | |
#chatCon .pop img { | |
border-radius: 50%; | |
width: 25%; | |
} | |
/*# sourceMappingURL=auto.css.map */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useState } from 'react' | |
//import the css here | |
export const PopChat = ( props ) => { | |
let hide = { | |
display: 'none', | |
} | |
let show = { | |
display: 'block' | |
} | |
let textRef = React.createRef() | |
const {messages} = props | |
const [chatopen, setChatopen] = useState(false) | |
const toggle = e => { | |
setChatopen(!chatopen) | |
} | |
const handleSend = e => { | |
const get = props.getMessage | |
get(textRef.current.value) | |
} | |
return ( | |
<div id='chatCon'> | |
<div class="chat-box" style={chatopen ? show : hide}> | |
<div class="header">Chat with me</div> | |
<div class="msg-area"> | |
{ | |
messages.map((msg, i) => ( | |
i%2 ? ( | |
<p class="right"><span>{ msg }</span></p> | |
) : ( | |
<p class="left"><span>{ msg }</span></p> | |
) | |
)) | |
} | |
</div> | |
<div class="footer"> | |
<input type="text" ref={textRef} /> | |
<button onClick={handleSend}><i class="fa fa-paper-plane"></i></button> | |
</div> | |
</div> | |
<div class="pop"> | |
<p><img onClick={toggle} src="https://p7.hiclipart.com/preview/151/758/442/iphone-imessage-messages-logo-computer-icons-message.jpg" alt="" /></p> | |
</div> | |
</div> | |
) | |
} | |
export default PopChat |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment