reza merged feedback

src/components/Feedback/card-remove.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="45.19" height="45.19" viewBox="0 0 45.19 45.19">
+  <g id="card-remove" transform="translate(8.485 8.485)">
+    <path id="Vector" d="M0,28.219,28.219,0" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="12"/>
+    <path id="Vector-2" data-name="Vector" d="M28.219,28.219,0,0" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="12"/>
+  </g>
+</svg>

src/components/Feedback/gray-upward-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="70" height="53" viewBox="0 0 70 53">
+  <path id="Polygon_1" data-name="Polygon 1" d="M35,0,70,53H0Z" fill="#efefef"/>
+</svg>

src/components/Feedback/index.js

@@ -0,0 +1,101 @@
+import React, { useState } from "react";
+
+import removeCard from "./card-remove.svg";
+
+import sadEmoji from "./sad-emoji.svg";
+import smileEmoji from "./smile-emoji.svg";
+import speechlessEmoji from "./speechless-emoji.svg";
+import suspiciousEmoji from "./suspicious-emoji.svg";
+import heartEmoji from "./heart-emoji.svg";
+import upwardArrow from "./gray-upward-icon.svg";
+
+const Feedback = ({ feedbacks }) => {
+  const [closeModal, setCloseModal] = useState(false);
+  const [activeFeedback, setActiveFeedback] = useState(null);
+
+  return (
+    <sections
+      className="w-full lg:w-1/3 bg-white rounded shadow-sm border border-gray-500 mx-auto my-20 flex-col items-center justify-center relative px-4"
+      style={{ display: closeModal ? "none" : "flex" }}
+    >
+      <div
+        className="bg-red-500 rounded-full p-2 absolute -top-5 right-10 cursor-pointer"
+        onClick={() => setCloseModal(true)}
+      >
+        <img src={removeCard} alt="" className="w-5" />
+      </div>
+      <h2 className="mt-10 text-productPrice">
+        نظر شما نسبت به رابط کاربری سایت جدیدمون چیه؟
+      </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)}
+          >
+            <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={upwardArrow}
+              alt=""
+              className={`w-20 h-20  rounded-full absolute left-1/2 transform -translate-x-1/2 bottom-0 translate-y-2/3 z-10 transition-all duration-500 ${
+                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
+        className="text-white rounded px-8 py-2 my-5 self-end ml-4"
+        style={{ backgroundColor: "#246E8A" }}
+      >
+        ارسال
+      </button>
+    </sections>
+  );
+};
+
+export default Feedback;
+
+Feedback.defaultProps = {
+  feedbacks: [
+    {
+      icon: heartEmoji,
+      name: "عالی",
+    },
+    {
+      icon: smileEmoji,
+      name: "خوب",
+    },
+    {
+      icon: speechlessEmoji,
+      name: "اوکیه",
+    },
+    {
+      icon: sadEmoji,
+      name: "بد",
+    },
+    {
+      icon: suspiciousEmoji,
+      name: "خیلی بد",
+    },
+  ],
+};

src/components/SidebarCategoryHover/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import category from "./data";
-import List from "./list";
+import List from "./List";
 import _ from "lodash";
 
 export default function SidebarCategoryHover() {

src/redux/data.js

@@ -26,6 +26,7 @@ import Footer from "../components/Footer";
 import SimpleDatePicker from "../components/SimpleDatePicker";
 import RangeDatePicker from '../components/RangeDatePicker';
 import Comments from "../components/Comments";
+import Feedback from "../components/Feedback";
 
 const components = [
   {
@@ -510,6 +511,16 @@ const components = [
       code: null,
     },
   },
+  {
+    name: "Feedback",
+    author: "Andalib",
+    props: [],
+    content: {
+      name: "Feedback",
+      component: <Feedback />,
+      code: null,
+    },
+  },
 ];
 
 export default components;