Reza_ashrafi
/
tailwind-shop-design-system
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

reza added comments

Browse Source
master
Reza_ashrafi 3 years ago
parent 4aa0b60f93
commit 3f36c618b4
8 changed files with 169 additions and 48 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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

1
package.json
Unescape View File

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

7
positive.svg
Unescape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 728 B

4
src/App.css
Unescape View File

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

19
src/components/Avatar/index.js
Unescape View File

@ -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;

168
src/components/Comments/index.js
Unescape View File

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

7
src/components/Comments/negative.svg
Unescape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 728 B

9
src/components/Comments/positive.svg
Unescape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 829 B

2
yarn.lock
Unescape View File

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

Write Preview
Loading…
Cancel
Save