You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
2.4 KiB
60 lines
2.4 KiB
import React, { Component } from 'react'; |
|
import ChatIcon from '@material-ui/icons/Chat'; |
|
import FileTabs from './FileTabs'; |
|
import Gallery from './Gallery'; |
|
import user2 from '../../../assets/images/user2.png'; |
|
|
|
import './index.scss'; |
|
export default class ChatInfo extends Component { |
|
constructor(props) { |
|
super(props); |
|
this.state = { |
|
gallery: null, |
|
user: { |
|
profileImages: [ |
|
{ id: 0, src: user2 }, |
|
{ id: 1, src: user2 }, |
|
{ id: 2, src: user2 }, |
|
{ id: 3, src: user2 }, |
|
], |
|
name: 'محسن محمدی', |
|
lastAct: '2 دقیقه پیش آنلاین بوده', |
|
bio: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد ', |
|
}, |
|
}; |
|
} |
|
|
|
setGallery = (val) => { |
|
this.setState({ |
|
gallery: val, |
|
}); |
|
}; |
|
|
|
render() { |
|
const { user, gallery } = this.state; |
|
return ( |
|
<div className="chat-info d-flex flex-column"> |
|
<div className="chat-info__image d-flex"> |
|
<img src={user.profileImages[0].src} onClick={() => this.setGallery('profile')} alt="" /> |
|
<div className="chat-info__image--float d-flex"> |
|
<ChatIcon style={{ color: 'white', width: 46, height: 46 }} /> |
|
</div> |
|
</div> |
|
<div className="chat-info__box d-flex flex-column"> |
|
<div className="chat-info__box--status d-flex flex-column"> |
|
<h1>{user.name}</h1> |
|
<p>{user.lastAct}</p> |
|
</div> |
|
<div className="chat-info__box--description d-flex"> |
|
<p>{user.bio}</p> |
|
</div> |
|
<FileTabs onClick={this.setGallery} /> |
|
</div> |
|
{gallery === 'profile' ? ( |
|
<Gallery data={user.profileImages} onClick={this.setGallery} /> |
|
) : null} |
|
{gallery === 'media' ? <Gallery data={null} /> : null} |
|
</div> |
|
); |
|
} |
|
}
|
|
|