parent
313c9b9ae6
commit
48ddb1fdc7
12 changed files with 413 additions and 3 deletions
@ -0,0 +1,19 @@ |
||||
import React from "react"; |
||||
import userImage from "../../assets/images/user.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; |
||||
|
After Width: | Height: | Size: 728 B |
|
After Width: | Height: | Size: 829 B |
|
After Width: | Height: | Size: 119 KiB |
|
After Width: | Height: | Size: 981 B |
|
After Width: | Height: | Size: 967 B |
@ -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 ( |
||||
<div className={`flex ${flex} items-center`}> |
||||
<img |
||||
src={incrementIcon} |
||||
alt="" |
||||
className="w-8 cursor-pointer pointer transition delay-150 duration-300 ease-in-out transform hover:-translate-y-2" |
||||
onClick={() => setCount(count + 1)} |
||||
/> |
||||
<span |
||||
className={`text-sm sm:text-base md:text-2xl font-bold text-color ${flex === 'flex-col' ? 'my-2' : 'mx-2'}`} |
||||
style={count > 0 ? { color: "green" } : { color: "red" }} |
||||
> |
||||
{count} |
||||
</span> |
||||
<img |
||||
src={decrementIcon} |
||||
alt="" |
||||
className="w-8 cursor-pointer transition delay-150 duration-300 ease-in-out transform hover:translate-y-2" |
||||
onClick={() => setCount(count - 1)} |
||||
/> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default Counter; |
||||
|
||||
Counter.defaultProps = { |
||||
incrementIcon: blackLikeIcon, |
||||
decrementIcon: blackDisLikeIcon, |
||||
flex: "flex-col", |
||||
value: 0 |
||||
}; |
||||
@ -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 ( |
||||
<> |
||||
<div className="flex flex-col w-full py-6 border-t-2 border-solid border-gray-200"> |
||||
<header className="w-full flex flex-row justify-between py-1"> |
||||
<div className="flex flex-row items-end"> |
||||
|
||||
<div className="flex items-center"> |
||||
<strong className="text-lg mx-2">{comment.username}</strong> |
||||
{comment.isCostumer ? <p className='text-blueC0'>خریدار محصول</p> : null} |
||||
</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"> |
||||
<div className='py-4 px-6 bg-blue-100 text-gray-400 rounded'><h1>برسش</h1></div> |
||||
</div> |
||||
</header> |
||||
<div className='flex items-center justify-between'> |
||||
<p className="text-gray-500 m-4">{comment.text}</p> |
||||
<Counter value={456} /> |
||||
</div> |
||||
<div className="self-end mt-4"> |
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
{comment.answers.length > 0 ? comment.answers.slice(0 , numberOfAnswers).map(e => ( |
||||
<div className="flex flex-row py-1"> |
||||
<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"> |
||||
<div className='py-4 px-6 bg-green-100 text-gray-400 rounded'><h1>باسخ</h1></div> |
||||
</div> |
||||
</header> |
||||
<div className='flex items-center justify-between'> |
||||
<p className="text-gray-500 m-4">{e.text}</p> |
||||
<div> |
||||
<Counter value={456} /> |
||||
</div> |
||||
</div> |
||||
<div className="self-end mt-4"> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
)) : <header className="w-full flex flex-row justify-between items-center"> |
||||
<div className="flex w-4/5 flex-row items-center"> |
||||
<div className='py-4 px-6 bg-green-100 text-gray-400 mx-16 rounded'><h1>ارسال باسخ</h1></div> |
||||
</div> |
||||
</header>} |
||||
{comment.answers.length > 1 ? <div className='w-full flex justify-center'> |
||||
{open ? <Button |
||||
title={viewmore} |
||||
backgroundColor={"bg-gray-200"} |
||||
border={{ |
||||
color: "#C01919", |
||||
width: "0px", |
||||
}} |
||||
width="24%" |
||||
radius={false} |
||||
onClick={isOpen ? () => {setNumberOfAnswers(1);setViewMore("مشاهده باسخ های بیشتر");setIsOpen(false);} : () => { setNumberOfAnswers(comment.answers.length);setViewMore('بستن باسخ ها');setIsOpen(true)}} |
||||
color={"text-gray-500"} |
||||
/> : null} |
||||
</div> : null} |
||||
|
||||
</div> |
||||
|
||||
</> |
||||
); |
||||
}; |
||||
return ( |
||||
<div className="w-full flex flex-col"> |
||||
{comments.map((comment, index) => ( |
||||
<Comment comment={comment} key={index} /> |
||||
))} |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
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, |
||||
}, |
||||
|
||||
|
||||
], |
||||
}; |
||||
@ -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); |
||||
}; |
||||
Loading…
Reference in new issue