2022-03-06 18:15:21 -05:00

38 lines
1.2 KiB
JavaScript

/* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */
import React from 'react';
import './chats.css';
class Contact extends React.Component {
constructor(props) {
super(props)
this.state = {
selected : this.props.selected
}
}
onClick() {
// This toggling of the contact selection is for demo purposes only
// Once backend is implemented, only one contact can be selected
if (this.state.selected === "false") {
this.setState({selected : "true"})
} else {
this.setState({selected : "false"})
}
}
render() {
return (
<div class={this.state.selected === "true" ? "contact dark" : "contact"}>
<div class="profilepiccontainer">
<img src={this.props.pfpsrc} class="profilepic" onClick={() => this.onClick()}
alt="profile" />
</div>
<div class="profilenamecontainer">
<div class="profilename" onClick={() => this.onClick()}>{this.props.name}</div>
</div>
</div>
)
}
}
export default Contact;