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 React, { Component } from "react"; |
||||||
import { Link } from 'react-router-dom'; |
import { Link } from "react-router-dom"; |
||||||
import moment from 'jalali-moment'; |
import moment from "jalali-moment"; |
||||||
import Avatar from '@material-ui/core/Avatar'; |
import Avatar from "@material-ui/core/Avatar"; |
||||||
|
|
||||||
import './index.scss'; |
import "./index.scss"; |
||||||
export default class Chat extends Component { |
export default class Chat extends Component { |
||||||
render() { |
render() { |
||||||
const { data } = this.props; |
const { data, selectedUser } = this.props; |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
{ |
{window.innerWidth < 1000 ? ( |
||||||
window.innerWidth < 1000 ? |
|
||||||
<Link to={`/chatroom/${data.id}`} className="chat d-flex"> |
<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"> |
<div className="chat__data d-flex flex-column"> |
||||||
<h1 className="chat__data--name">{data.name}</h1> |
<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> |
<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> |
||||||
</Link> : null |
</Link> |
||||||
} |
) : null} |
||||||
{ |
{window.innerWidth > 1000 ? ( |
||||||
window.innerWidth > 1000 ? |
<div |
||||||
<div className="chat d-flex" onClick={() => this.props.parent.setState({ selectedUser : data.id })}> |
className="chat d-flex" |
||||||
<Avatar src={data.imageUrl} alt={data.name} className={'avatar fontLight'} /> |
onClick={() => |
||||||
|
this.props.parent.setState({ selectedUser: data.id }) |
||||||
|
} |
||||||
|
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"> |
<div className="chat__data d-flex flex-column"> |
||||||
<h1 className="chat__data--name">{data.name}</h1> |
<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> |
<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> |
||||||
</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{ |
||||||
text-decoration: none; |
a { |
||||||
font-family: numeralLight; |
text-decoration: none; |
||||||
color: #6F7074; |
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