|
|
import React from "react"; |
|
|
import { connect } from "react-redux"; |
|
|
// import { connectToParent } from "../../utils/comments"; |
|
|
import userImage from "./user.svg"; |
|
|
import positiveIcon from "./positive.svg"; |
|
|
import negativeIcon from "./negative.svg"; |
|
|
import Avatar from "../Avatar" |
|
|
import moment from "jalali-moment"; |
|
|
import Button from '../Button'; |
|
|
import StarRating from "../StarRating"; |
|
|
|
|
|
export const Comments = ({ comments }) => { |
|
|
// connectToParent(comments); |
|
|
const Comment = ({ comment }) => { |
|
|
return ( |
|
|
<div className="flex flex-col w-full"> |
|
|
<header className="w-full flex flex-row justify-between py-1"> |
|
|
<div className="flex flex-row items-end"> |
|
|
<Avatar source={comment.userImage} size={60} rounded={true} /> |
|
|
<div className="flex flex-col"> |
|
|
<strong className="text-lg mr-2">{comment.username}</strong> |
|
|
<div |
|
|
className="flex flex-row divide-x divide-gray-300 mt-4 divided items-center" |
|
|
style={{ direction: "ltr" }} |
|
|
> |
|
|
<span className="px-2 text-xs text-gray-500"> |
|
|
{comment.product?.color} |
|
|
</span> |
|
|
<span className="px-2 text-xs text-gray-500"> |
|
|
{comment.product?.name} |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div |
|
|
className="flex flex-row divide-x divide-gray-300 divided items-center" |
|
|
style={{ direction: "ltr" }} |
|
|
> |
|
|
<span className="px-2 text-sm text-blue-400"> |
|
|
{moment(comment.data).locale("fa").format("YYYY/MM/DD")} |
|
|
</span> |
|
|
<span className="px-2 text-sm text-blue-400"> |
|
|
{comment.date.getHours()} : {comment.date.getMinutes()} |
|
|
</span> |
|
|
</div> |
|
|
</header> |
|
|
<div className="flex flex-row py-4"> |
|
|
<div style={{ width: 60 }} className="min-h-full"></div> |
|
|
<div className="flex flex-1 flex-col px-3"> |
|
|
<header className="w-full flex flex-row justify-between items-center"> |
|
|
<div className="flex flex-row items-center"><StarRating /></div> |
|
|
<div className="flex flex-row items-center"> |
|
|
{comment.status === true && ( |
|
|
<> |
|
|
<img src={positiveIcon} alt="" className="w-6 ml-2" /> |
|
|
<span className="text-sm text-black"> |
|
|
برای خرید توصیه میکنم |
|
|
</span> |
|
|
</> |
|
|
)} |
|
|
{comment.status === false && ( |
|
|
<> |
|
|
<img src={negativeIcon} alt="" className="w-6 ml-2" /> |
|
|
<span className="text-sm text-black"> |
|
|
برای خرید توصیه نمیکنم |
|
|
</span> |
|
|
</> |
|
|
)} |
|
|
</div> |
|
|
</header> |
|
|
<p className="text-gray-500 mt-2">{comment.text}</p> |
|
|
<div className="self-end mt-4"> |
|
|
{/* <Button title='اطلاعات بیشتر' backgroundColor='bg-gray-200' width={}/> */} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
); |
|
|
}; |
|
|
return ( |
|
|
<div className="w-full flex flex-col"> |
|
|
{comments.map((comment, index) => ( |
|
|
<Comment comment={comment} key={index} /> |
|
|
))} |
|
|
</div> |
|
|
); |
|
|
}; |
|
|
|
|
|
const mapStateToProps = (state) => ({}); |
|
|
|
|
|
const mapDispatchToProps = {}; |
|
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Comments); |
|
|
|
|
|
Comments.defaultProps = { |
|
|
comments: [ |
|
|
{ |
|
|
id: 0, |
|
|
pid: null, |
|
|
username: "آرش سامانی", |
|
|
date: new Date(), |
|
|
text: "خالد حسینی تو رمان باد بادک باز مینویسه : ﻣﺮﺩ ﺁﻫﺴﺘﻪ ﺩﺭ ﮔﻮﺵ ﻓﺮﺯﻧﺪ ﺗﺎﺯﻩ ﺑﻪ ﺑﻠﻮﻍ ﺭﺳﯿﺪﻩ ﺍﺵ ﺑﺮﺍﯼ ﭘﻨﺪ ﭼﻨﯿﻦ ﻧﺠﻮﺍ ﮐﺮﺩ : ” ﭘﺴﺮﻡ ﺩﺭ ﺯﻧﺪﮔﯽ ﻫﺮﮔﺰ ﺩﺯﺩﯼ ﻧﮑﻦ ” ﭘﺴﺮ ﻣﺘﻌﺠﺐ ﻭ ﻣﺒﻬﻮﺕ ﺑﻪ ﭘﺪﺭ ﻧﮕﺎﻩ ﮐﺮﺩ ﺑﺪﯾﻦ ﻣﻌﻨﺎ ﮐﻪ ﺍﻭ ﻫﺮﮔﺰ ﺩﺳﺖ ﮐﺞ ﻧﺪﺍﺷﺘﻪ ﭘﺪﺭ ﺑﻪ ﻧﮕﺎﻩ ﻣﺘﻌﺠﺐ ﻓﺮﺯﻧﺪ ﻟﺒﺨﻨﺪﯼ ﺯﺩ ﻭ ﺍﺩﺍﻣﻪ ", |
|
|
userImage: userImage, |
|
|
rate: 4, |
|
|
product: { |
|
|
name: "مک بوک پرو 16 گیگ", |
|
|
color: "خاکستری", |
|
|
}, |
|
|
status: true, |
|
|
}, |
|
|
|
|
|
], |
|
|
};
|
|
|
|