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

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>
);
}
}