parent
b94acb6143
commit
eb18a88fbf
37 changed files with 464 additions and 203 deletions
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 659 KiB |
|
After Width: | Height: | Size: 207 KiB |
|
After Width: | Height: | Size: 81 KiB |
|
After Width: | Height: | Size: 101 KiB |
|
After Width: | Height: | Size: 366 KiB |
@ -1,40 +1,57 @@ |
||||
import React, { Component } from 'react'; |
||||
import { Link } from 'react-router-dom'; |
||||
import moment from 'jalali-moment'; |
||||
import Avatar from '@material-ui/core/Avatar'; |
||||
import React, { Component } from "react"; |
||||
import { Link } from "react-router-dom"; |
||||
import moment from "jalali-moment"; |
||||
import Avatar from "@material-ui/core/Avatar"; |
||||
|
||||
import './index.scss'; |
||||
import "./index.scss"; |
||||
export default class Chat extends Component { |
||||
render() { |
||||
const { data } = this.props; |
||||
const { data, selectedUser } = this.props; |
||||
return ( |
||||
<> |
||||
{ |
||||
window.innerWidth < 1000 ? |
||||
{window.innerWidth < 1000 ? ( |
||||
<Link to={`/chatroom/${data.id}`} className="chat d-flex"> |
||||
<Avatar src={data.imageUrl} alt={data.name} className={'avatar fontLight'} /> |
||||
<Avatar |
||||
src={data.imageUrl} |
||||
alt={data.name} |
||||
className={"avatar fontLight"} |
||||
/> |
||||
<div className="chat__data d-flex flex-column"> |
||||
<h1 className="chat__data--name">{data.name}</h1> |
||||
<p className="chat__data--lastMessage">{data.lastMessage.slice(0, 40) + '...'}</p> |
||||
<p className="chat__data--lastMessage"> |
||||
{data.lastMessage.slice(0, 40) + "..."} |
||||
</p> |
||||
<span>{data.badge}</span> |
||||
<div>{moment(data.date || new Date()).format('jD/jM hh:mm')}</div> |
||||
<div>{moment(data.date || new Date()).format("jD/jM hh:mm")}</div> |
||||
</div> |
||||
</Link> : null |
||||
</Link> |
||||
) : null} |
||||
{window.innerWidth > 1000 ? ( |
||||
<div |
||||
className="chat d-flex" |
||||
onClick={() => |
||||
this.props.parent.setState({ selectedUser: data.id }) |
||||
} |
||||
{ |
||||
window.innerWidth > 1000 ? |
||||
<div className="chat d-flex" onClick={() => this.props.parent.setState({ selectedUser : data.id })}> |
||||
<Avatar src={data.imageUrl} alt={data.name} className={'avatar fontLight'} /> |
||||
style={{ |
||||
backgroundColor: selectedUser === data.id ? "#eee" : "white", |
||||
}} |
||||
> |
||||
<Avatar |
||||
src={data.imageUrl} |
||||
alt={data.name} |
||||
className={"avatar fontLight"} |
||||
/> |
||||
<div className="chat__data d-flex flex-column"> |
||||
<h1 className="chat__data--name">{data.name}</h1> |
||||
<p className="chat__data--lastMessage">{data.lastMessage.slice(0, 40) + '...'}</p> |
||||
<p className="chat__data--lastMessage"> |
||||
{data.lastMessage.slice(0, 40) + "..."} |
||||
</p> |
||||
<span>{data.badge}</span> |
||||
<div>{moment(data.date || new Date()).format('jD/jM hh:mm')}</div> |
||||
<div>{moment(data.date || new Date()).format("jD/jM hh:mm")}</div> |
||||
</div> |
||||
</div> : null |
||||
} |
||||
</div> |
||||
) : null} |
||||
</> |
||||
|
||||
); |
||||
} |
||||
} |
||||
|
||||
@ -0,0 +1,15 @@ |
||||
import React, { Component } from 'react'; |
||||
|
||||
import './index.scss'; |
||||
export default function AddToCart(props) { |
||||
return( |
||||
<> |
||||
{ |
||||
window.innerWidth > 1000 ?
|
||||
<section className="product-addtocart d-flex flex-column"> |
||||
|
||||
</section> : null |
||||
} |
||||
</> |
||||
); |
||||
} |
||||
@ -0,0 +1,5 @@ |
||||
.product-addtocart{ |
||||
flex: 3.5; |
||||
background-color: #eee; |
||||
margin: 10px; |
||||
} |
||||
@ -1,5 +1,8 @@ |
||||
a { |
||||
.MuiBreadcrumbs-li{ |
||||
a { |
||||
text-decoration: none; |
||||
font-family: numeralLight; |
||||
color: #6F7074; |
||||
letter-spacing: -1px; |
||||
} |
||||
} |
||||
@ -0,0 +1,22 @@ |
||||
import React, { Component } from 'react'; |
||||
|
||||
import './index.scss'; |
||||
export default function Gallery(props) { |
||||
return( |
||||
<> |
||||
{ |
||||
window.innerWidth > 1000 ?
|
||||
<section className="product-gallery d-flex flex-column"> |
||||
<div className="product-gallery__top"> |
||||
|
||||
</div> |
||||
<div className="product-gallery__list d-flex"> |
||||
<div></div> |
||||
<div></div> |
||||
<div></div> |
||||
</div> |
||||
</section> : null |
||||
} |
||||
</> |
||||
); |
||||
} |
||||
@ -0,0 +1,21 @@ |
||||
.product-gallery{ |
||||
flex: 5; |
||||
margin: 10px; |
||||
justify-content: space-between; |
||||
&__top{ |
||||
width: 100%; |
||||
height: 320px; |
||||
background-color: #eee; |
||||
border-radius: 20px; |
||||
} |
||||
&__list{ |
||||
width: 100%; |
||||
justify-content: space-between; |
||||
& div{ |
||||
min-width: 110px; |
||||
height: 110px; |
||||
background-color: #eee; |
||||
border-radius: 20px; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,15 @@ |
||||
import React, { Component } from 'react'; |
||||
|
||||
import './index.scss'; |
||||
export default function Info(props) { |
||||
return( |
||||
<> |
||||
{ |
||||
window.innerWidth > 1000 ?
|
||||
<section className="product-info d-flex flex-column"> |
||||
|
||||
</section> : null |
||||
} |
||||
</> |
||||
); |
||||
} |
||||
@ -0,0 +1,5 @@ |
||||
.product-info{ |
||||
flex: 6; |
||||
background-color: #eee; |
||||
margin: 10px; |
||||
} |
||||
Loading…
Reference in new issue