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.
 
 
 

113 lines
4.4 KiB

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()}&nbsp;:&nbsp;{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,
},
],
};