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.
 
 
 

98 lines
3.1 KiB

import React, { useState } from "react";
import Button from "../ButtonDesign/Button";
const Feedback = ({ feedbakTitle, feedbacks }) => {
const [closeModal, setCloseModal] = useState(false);
const [activeFeedback, setActiveFeedback] = useState(null);
return (
<sections
className={`relative flex-col items-center ${
closeModal ? "hidden" : "flex"
} justify-center mx-auto my-20 px-4 bg-white rounded shadow-sm border border-surfaceBorder`}
// style={{ display: closeModal ? "none" : "" }}
>
<div
className="p-2 absolute -top-5 right-10 bg-error rounded-full cursor-pointer"
onClick={() => setCloseModal(true)}
>
<img src="images/card-remove.svg" alt="remove" className="w-5" />
</div>
<h2 className="mt-10 text-primaryText">{feedbakTitle}</h2>
<div className="flex flex-row justify-between">
{feedbacks.map((item, index) => (
<div
className={`flex flex-col items-center mt-7 w-full px-4 ${
activeFeedback ? "pb-8" : "pb-0"
} relative cursor-pointer transition-all duration-500`}
key={index}
// onClick={() => setActiveFeedback(item)}
onClick={() =>
setActiveFeedback(activeFeedback === item ? null : item)
}
>
<img
src={item.icon}
alt=""
className="transition duration-300 transform hover:-translate-y-1 w-14 h-14"
/>
<p
className={`text-sm mt-3 transition-all duration-500 ${
activeFeedback === item ? "opacity-100" : "opacity-0"
} `}
>
{item.name}
</p>
<img
src="images/gray-upward-icon.svg"
alt=""
className={`w-20 rounded-full absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-2/3 transition-all duration-500 z-10 ${
activeFeedback === item ? "opacity-100" : "opacity-0"
}`}
/>
</div>
))}
</div>
<textarea
className={`resize-y w-full px-2 focus:outline-none text-sm transition-all duration-500 z-20 bg-gray-100 rounded-md ${
activeFeedback ? "h-44 py-4" : "h-0 py-0"
}`}
placeholder="به ما در رابطه تجربه کار با سایتمون بگید..."
></textarea>
<Button
text={"ارسال"}
className="self-end my-5 ml-4 px-8 py-2 bg-primary hover:bg-primaryDark text-white rounded "
/>
</sections>
);
};
export default Feedback;
Feedback.defaultProps = {
feedbakTitle: "نظر شما نسبت به رابط کاربری سایت جدیدمون چیه؟",
feedbacks: [
{
icon: "images/heart-emoji.svg",
name: "عالی",
},
{
icon: "images/smile-emoji.svg",
name: "خوب",
},
{
icon: "images/speechless-emoji.svg",
name: "اوکیه",
},
{
icon: "images/sad-emoji.svg",
name: "بد",
},
{
icon: "images/suspicious-emoji.svg",
name: "خیلی بد",
},
],
};