diff --git a/src/components/Avatar/index.js b/src/components/Avatar/index.js new file mode 100644 index 0000000..7444400 --- /dev/null +++ b/src/components/Avatar/index.js @@ -0,0 +1,19 @@ +import React from "react"; +import userImage from "../../assets/images/user.png"; + +function Avatar({ source, size, rounded, status }) { + return ( +
+ avatar + {status && ( + + )} +
+ ); +} + +export default Avatar; diff --git a/src/components/Comments/index.js b/src/components/Comments/index.js new file mode 100644 index 0000000..301166c --- /dev/null +++ b/src/components/Comments/index.js @@ -0,0 +1,113 @@ +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 ( +
+
+
+ +
+ {comment.username} +
+ + {comment.product?.color} + + + {comment.product?.name} + +
+
+
+
+ + {moment(comment.data).locale("fa").format("YYYY/MM/DD")} + + + {comment.date.getHours()} : {comment.date.getMinutes()} + +
+
+
+
+
+
+
+
+ {comment.status === true && ( + <> + + + برای خرید توصیه می‌کنم + + + )} + {comment.status === false && ( + <> + + + برای خرید توصیه نمی‌کنم + + + )} +
+
+

{comment.text}

+
+ {/*
+
+
+
+ ); + }; + return ( +
+ {comments.map((comment, index) => ( + + ))} +
+ ); +}; + +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, + }, + + ], +}; diff --git a/src/components/Comments/negative.svg b/src/components/Comments/negative.svg new file mode 100644 index 0000000..ab9d922 --- /dev/null +++ b/src/components/Comments/negative.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/components/Comments/positive.svg b/src/components/Comments/positive.svg new file mode 100644 index 0000000..7b9aa6d --- /dev/null +++ b/src/components/Comments/positive.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/Comments/user.svg b/src/components/Comments/user.svg new file mode 100644 index 0000000..e8d43cf --- /dev/null +++ b/src/components/Comments/user.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/components/Counter/black-dislike-icon.svg b/src/components/Counter/black-dislike-icon.svg new file mode 100644 index 0000000..a9e211e --- /dev/null +++ b/src/components/Counter/black-dislike-icon.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/components/Counter/black-like-icon.svg b/src/components/Counter/black-like-icon.svg new file mode 100644 index 0000000..9d7e89c --- /dev/null +++ b/src/components/Counter/black-like-icon.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/components/Counter/index.js b/src/components/Counter/index.js new file mode 100644 index 0000000..a892176 --- /dev/null +++ b/src/components/Counter/index.js @@ -0,0 +1,40 @@ +import React, { useState } from "react"; + +import blackDisLikeIcon from "./black-dislike-icon.svg"; +import blackLikeIcon from "./black-like-icon.svg"; + +const Counter = ({ incrementIcon, decrementIcon, flex, value }) => { + const [count, setCount] = useState(value); + + return ( +
+ setCount(count + 1)} + /> + 0 ? { color: "green" } : { color: "red" }} + > + {count} + + setCount(count - 1)} + /> +
+ ); +}; + +export default Counter; + +Counter.defaultProps = { + incrementIcon: blackLikeIcon, + decrementIcon: blackDisLikeIcon, + flex: "flex-col", + value: 0 +}; diff --git a/src/components/ProductDescription/index.js b/src/components/ProductDescription/index.js new file mode 100644 index 0000000..7ab7eb4 --- /dev/null +++ b/src/components/ProductDescription/index.js @@ -0,0 +1,135 @@ + +import React from "react"; +import { useState } from "react"; + +const ProductDescription = ({ + navTitles, + items, + addToCart +}) =>{ + const [name, setName] = useState(navTitles[0].name); + const [type, setType] = useState([]); + return( + <> +
+ +
+
+
+ + {items.map(e => ( + e.name == name ? + e.items.map(item => ( + + + )) : null + + + ))} +
+
+ {addToCart} +
+ +
+ + ); +}; + + + + + +export default ProductDescription; + + + + +ProductDescription.defaultProps = { + navTitles: [ + { + id: 0, + title: 'مشخصات', + isActive: true, + name: 'moshakhasat' + }, + { + id: 1, + title: 'نقد و بررسی', + isActive: false, + name: 'review' + }, + { + id: 2, + title: 'برسش و باسخ', + isActive:false + }, + ], + items: [ + { + name: 'moshakhasat', + items: [ + { + title : 'وزن کتاب', + description: '۱ کیلوگرم' + }, + { + title : 'تعداد صفحات', + description: '400 صفحه' + }, + { + title : 'نوع کاغذ', + description: 'گلاسه' + }, + { + title : 'شماره شابک', + description: '1225548218000005818765' + }, + { + title : 'انتشارات', + description: 'رزمندگان' + }, + { + title : 'نویسنده و یا معلف', + description: 'یک نویسنده گمنام' + }, + { + title : 'قطع', + description: 'خشتی' + }, + { + title : 'سال انتشار', + description: '1399' + }, + ] + }, + { + name: 'review', + items: [{ + description: 'لورم ایبسوم' + }] + } + ] + +} \ No newline at end of file diff --git a/src/components/QandA/index.js b/src/components/QandA/index.js new file mode 100644 index 0000000..26817dd --- /dev/null +++ b/src/components/QandA/index.js @@ -0,0 +1,158 @@ +import React, { useState } from 'react'; + + +import moment from "jalali-moment"; + +import StarRating from "../StarRating"; +import Counter from '../Counter'; +import Button from '../Button'; + +const QandA = ({comments}) =>{ + const Comment = ({ comment }) => { + const [open, Setopen] = useState(true); + const [viewmore, setViewMore] = useState("مشاهده باسخ های بیشتر"); + const [numberOfAnswers, setNumberOfAnswers] = useState(1); + const [isOpen, setIsOpen] = useState(false) + return ( + <> +
+
+
+ +
+ {comment.username} + {comment.isCostumer ?

خریدار محصول

: null} +
+
+
+ + {moment(comment.data).locale("fa").format("YYYY/MM/DD")} + + + {comment.date.getHours()} : {comment.date.getMinutes()} + +
+
+
+
+
+
+
+

برسش

+
+
+
+

{comment.text}

+ +
+
+ +
+
+ +
+ + {comment.answers.length > 0 ? comment.answers.slice(0 , numberOfAnswers).map(e => ( +
+
+
+
+
+

باسخ

+
+
+
+

{e.text}

+
+ +
+
+
+ +
+ +
+ +
+ )) :
+
+

ارسال باسخ

+
+
} + {comment.answers.length > 1 ?
+ {open ?
: null} + +
+ + + ); + }; + return ( +
+ {comments.map((comment, index) => ( + + ))} +
+ ); +}; + +export default QandA; + +QandA.defaultProps = { + comments: [ + { + id: 0, + pid: null, + username: "آرش سامانی", + isCostumer: true, + date: new Date(), + text: "خالد حسینی تو رمان باد بادک باز مینویسه : ﻣﺮﺩ ﺁﻫﺴﺘﻪ ﺩﺭ ﮔﻮﺵ ﻓﺮﺯﻧﺪ ﺗﺎﺯﻩ ﺑﻪ ﺑﻠﻮﻍ ﺭﺳﯿﺪﻩ ﺍﺵ ﺑﺮﺍﯼ ﭘﻨﺪ ﭼﻨﯿﻦ ﻧﺠﻮﺍ ﮐﺮﺩ : ” ﭘﺴﺮﻡ ﺩﺭ ﺯﻧﺪﮔﯽ ﻫﺮﮔﺰ ﺩﺯﺩﯼ ﻧﮑﻦ ” ﭘﺴﺮ ﻣﺘﻌﺠﺐ ﻭ ﻣﺒﻬﻮﺕ ﺑﻪ ﭘﺪﺭ ﻧﮕﺎﻩ ﮐﺮﺩ ﺑﺪﯾﻦ ﻣﻌﻨﺎ ﮐﻪ ﺍﻭ ﻫﺮﮔﺰ ﺩﺳﺖ ﮐﺞ ﻧﺪﺍﺷﺘﻪ ﭘﺪﺭ ﺑﻪ ﻧﮕﺎﻩ ﻣﺘﻌﺠﺐ ﻓﺮﺯﻧﺪ ﻟﺒﺨﻨﺪﯼ ﺯﺩ ﻭ ﺍﺩﺍﻣﻪ ", + rate: 4, + answers: [ + { + text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد' + }, + { + text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد' + }, + { + text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها' + }, + { + text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است' + }, + + ], + status: true, + }, + { + id: 1, + pid: null, + username: "سورنا عابدی", + isCostumer: false, + date: new Date(), + text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد ", + rate: 4, + answers: [ + ], + status: true, + }, + + + ], + }; \ No newline at end of file diff --git a/src/utils/comments.js b/src/utils/comments.js new file mode 100644 index 0000000..5b6cfd8 --- /dev/null +++ b/src/utils/comments.js @@ -0,0 +1,22 @@ +export const connectToParent = (list) => { + let comments = []; + for (let item of list) { + comments.push({ ...item, child: [] }); + } + + for (let comment1 of comments) { + if (comment1.pid !== null) { + const index = comments.indexOf( + comments.filter((comment2) => comment2.id === comment1.pid)[0] + ); + comments[index] = { + ...comments[index], + child: [...comments[index].child, comment1], + }; + } else { + + } + } + // comments = comments.filter((comment) => comment.pid === null); + console.log(comments); +}; diff --git a/src/views/Product/Desktop/ProductOverAll/index.js b/src/views/Product/Desktop/ProductOverAll/index.js index 88ccb19..4ae21d3 100644 --- a/src/views/Product/Desktop/ProductOverAll/index.js +++ b/src/views/Product/Desktop/ProductOverAll/index.js @@ -126,8 +126,7 @@ export const ProductOverAll = ({ - - + ); }; diff --git a/src/views/Product/Desktop/index.js b/src/views/Product/Desktop/index.js index 2ec6653..1900767 100644 --- a/src/views/Product/Desktop/index.js +++ b/src/views/Product/Desktop/index.js @@ -1,10 +1,28 @@ import React from "react"; import ProductOverAll from "./ProductOverAll"; +import ProductTab from "../../../components/ProductTab"; +import ProductSuggestions from "../../../components/ProductSuggestion"; +import Rate from "../Rate"; +import Comment from "../Comment"; +import Comments from "../../../components/Comments"; +import QandA from "../../../components/QandA"; const DesktopProductLayout = () =>{ return ( -
+
+ +
+ +
+
+ +
+
+ + +
+
); };