reza added comments

master
Reza_ashrafi 3 years ago
parent 4aa0b60f93
commit 3f36c618b4
  1. 1
      package.json
  2. 7
      positive.svg
  3. 4
      src/App.css
  4. 19
      src/components/Avatar/index.js
  5. 168
      src/components/Comments/index.js
  6. 7
      src/components/Comments/negative.svg
  7. 9
      src/components/Comments/positive.svg
  8. 2
      yarn.lock

@ -8,6 +8,7 @@
"@testing-library/jest-dom": "^5.11.4", "@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0", "@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10", "@testing-library/user-event": "^12.1.10",
"jalali-moment": "^3.3.10",
"jalali-react-datepicker": "^1.2.1", "jalali-react-datepicker": "^1.2.1",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"rc-slider": "^9.7.5", "rc-slider": "^9.7.5",

@ -0,0 +1,7 @@
<svg id="vuesax_linear_clipboard-close" data-name="vuesax/linear/clipboard-close" xmlns="http://www.w3.org/2000/svg" width="55.763" height="55.763" viewBox="0 0 55.763 55.763">
<g id="clipboard-close" transform="translate(0 0)">
<path id="Vector" d="M9.2,9.2,0,0" transform="translate(23.327 27.881)" fill="none" stroke="#ff0902" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M9.2,0,0,9.2" transform="translate(23.235 27.974)" fill="none" stroke="#ff0902" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M0,0H55.763V55.763H0Z" transform="translate(0)" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 728 B

@ -1,3 +1,7 @@
body{ body{
direction: rtl; direction: rtl;
} }
*{
font-family: iranSansX;
}

@ -0,0 +1,19 @@
import React from "react";
import userImage from "../Blogs/assets/blog-author.png";
function Avatar({ source, size, rounded, status }) {
return (
<div className={`${rounded} overflow-hidden relative`}>
<img
src={source ? source : userImage}
alt="avatar"
style={{ width: size, height: size, objectFit: "cover" }}
/>
{status && (
<span className="w-1.5 h-1.5 rounded-full bg-green-500"></span>
)}
</div>
);
}
export default Avatar;

@ -1,82 +1,156 @@
import React from 'react' import React from "react";
import { connect } from 'react-redux'; import { connect } from "react-redux";
import { connectToParent } from '../../utils/comments'; import { connectToParent } from "../../utils/comments";
import userImage from './user.svg'; 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';
export const Comments = ({comments}) => { export const Comments = ({ comments }) => {
connectToParent(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 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">fuck</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 buttonBgColor="bg-gray-400" />
</div>
</div>
</div>
</div>
);
};
return ( return (
<div className="w-full flex flex-col"> <div className="w-full flex flex-col">
{comments.map((comment, index) => (
<Comment comment={comment} key={index} />
))}
</div> </div>
) );
} };
const mapStateToProps = (state) => ({
})
const mapDispatchToProps = { const mapStateToProps = (state) => ({});
} const mapDispatchToProps = {};
export default connect(mapStateToProps, mapDispatchToProps)(Comments); export default connect(mapStateToProps, mapDispatchToProps)(Comments);
Comments.defaultProps = { Comments.defaultProps = {
comments : [ comments: [
{ {
id: 0, id: 0,
pid: null, pid: null,
username : 'آرش سامانی', username: "آرش سامانی",
date : new Date(), date: new Date(),
text : 'به زودی می فهمند که اشتباه کرده اند و عظمت هر ملتی بر روی خرابه های وطن خودش میباشد', text: "به زودی می فهمند که اشتباه کرده اند و عظمت هر ملتی بر روی خرابه های وطن خودش میباشد",
userImage : userImage, userImage: userImage,
rate : 4, rate: 4,
product: {
name: "مک بوک پرو 16 گیگ",
color: "خاکستری",
},
status: true,
}, },
{ {
id: 1, id: 1,
pid: 0, pid: 0,
username : 'سورنا عابدی', username: "سورنا عابدی",
date : new Date(), date: new Date(),
text : 'به زودی می فهمند که اشتباه کرده اند و عظمت هر ملتی بر روی خرابه های وطن خودش میباشد', text: "به زودی می فهمند که اشتباه کرده اند و عظمت هر ملتی بر روی خرابه های وطن خودش میباشد",
userImage : userImage, userImage: userImage,
rate : 4, rate: 4,
}, },
{ {
id: 2, id: 2,
pid: 1, pid: 1,
username : 'آرش سامانی', username: "آرش سامانی",
date : new Date(), date: new Date(),
text : 'به زودی می فهمند که اشتباه کرده اند و عظمت هر ملتی بر روی خرابه های وطن خودش میباشد', text: "به زودی می فهمند که اشتباه کرده اند و عظمت هر ملتی بر روی خرابه های وطن خودش میباشد",
userImage : userImage, userImage: userImage,
rate : 4, rate: 4,
}, },
{ {
id: 3, id: 3,
pid: 2, pid: 2,
username : 'آرش سامانی', username: "آرش سامانی",
date : new Date(), date: new Date(),
text : 'به زودی می فهمند که اشتباه کرده اند و عظمت هر ملتی بر روی خرابه های وطن خودش میباشد', text: "به زودی می فهمند که اشتباه کرده اند و عظمت هر ملتی بر روی خرابه های وطن خودش میباشد",
userImage : userImage, userImage: userImage,
rate : 4, rate: 4,
}, },
{ {
id: 4, id: 4,
pid: 3, pid: 3,
username : 'آرش سامانی', username: "آرش سامانی",
date : new Date(), date: new Date(),
text : 'به زودی می فهمند که اشتباه کرده اند و عظمت هر ملتی بر روی خرابه های وطن خودش میباشد', text: "به زودی می فهمند که اشتباه کرده اند و عظمت هر ملتی بر روی خرابه های وطن خودش میباشد",
userImage : userImage, userImage: userImage,
rate : 4, rate: 4,
}, },
{ {
id: 5, id: 5,
pid: null, pid: null,
username : 'رضا رحمانی', username: "رضا رحمانی",
date : new Date(), date: new Date(),
text : 'به زودی می فهمند که اشتباه کرده اند و عظمت هر ملتی بر روی خرابه های وطن خودش میباشد', text: "به زودی می فهمند که اشتباه کرده اند و عظمت هر ملتی بر روی خرابه های وطن خودش میباشد",
userImage : userImage, userImage: userImage,
rate : 4, rate: 4,
}, },
], ],
} };

@ -0,0 +1,7 @@
<svg id="vuesax_linear_clipboard-close" data-name="vuesax/linear/clipboard-close" xmlns="http://www.w3.org/2000/svg" width="55.763" height="55.763" viewBox="0 0 55.763 55.763">
<g id="clipboard-close" transform="translate(0 0)">
<path id="Vector" d="M9.2,9.2,0,0" transform="translate(23.327 27.881)" fill="none" stroke="#ff0902" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M9.2,0,0,9.2" transform="translate(23.235 27.974)" fill="none" stroke="#ff0902" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M0,0H55.763V55.763H0Z" transform="translate(0)" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 728 B

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" width="42.324" height="42.324" viewBox="0 0 42.324 42.324">
<g id="vuesax_linear_tick-circle" data-name="vuesax/linear/tick-circle" transform="translate(-748 -188)">
<g id="tick-circle" transform="translate(748 188)">
<path id="Vector" d="M17.635,35.27A17.635,17.635,0,1,0,0,17.635,17.687,17.687,0,0,0,17.635,35.27Z" transform="translate(3.527 3.527)" fill="none" stroke="#20d513" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,4.991,4.991,9.981,14.99,0" transform="translate(13.667 16.171)" fill="none" stroke="#20d513" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M0,0H42.324V42.324H0Z" fill="none" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 829 B

@ -6719,7 +6719,7 @@ jalaali-js@^1.1.0:
resolved "https://registry.yarnpkg.com/jalaali-js/-/jalaali-js-1.2.3.tgz#365775826d2eece5e6552b96aff384c8773bb406" resolved "https://registry.yarnpkg.com/jalaali-js/-/jalaali-js-1.2.3.tgz#365775826d2eece5e6552b96aff384c8773bb406"
integrity sha512-irl0pXL59Xl0Oz6jyOiJed/NxrVeS6fSx6a8atQOH/LsPWPZwBCxwe5XVEIqjnwt69FRxvnCCwQn5dTMxwbazQ== integrity sha512-irl0pXL59Xl0Oz6jyOiJed/NxrVeS6fSx6a8atQOH/LsPWPZwBCxwe5XVEIqjnwt69FRxvnCCwQn5dTMxwbazQ==
jalali-moment@^3.3.1: jalali-moment@^3.3.1, jalali-moment@^3.3.10:
version "3.3.10" version "3.3.10"
resolved "https://registry.yarnpkg.com/jalali-moment/-/jalali-moment-3.3.10.tgz#10cb4c2080925a41ee8c72862ba63f6b5fb04743" resolved "https://registry.yarnpkg.com/jalali-moment/-/jalali-moment-3.3.10.tgz#10cb4c2080925a41ee8c72862ba63f6b5fb04743"
integrity sha512-hyNsDJXB23MHLnZWPXY+Mu0zsrp+B+KzabyqPP0oGcMsEGp8yMpeVledOY+B/DrIOVeRY7JLz8b3lyJ3/vajsQ== integrity sha512-hyNsDJXB23MHLnZWPXY+Mu0zsrp+B+KzabyqPP0oGcMsEGp8yMpeVledOY+B/DrIOVeRY7JLz8b3lyJ3/vajsQ==

Loading…
Cancel
Save