update src/components/Feedback/index.js and data.js

src/components/Feedback/index.js

@@ -1,36 +1,27 @@
 import React, { useState } from "react";
 
-import removeCard from "./card-remove.svg";
+const Feedback = ({ feedbakTitle, feedbacks }) => {
-
-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"
+      className="relative flex-col items-center justify-center mx-auto my-20 px-4 bg-white rounded shadow-sm border border-gray-500"
       style={{ display: closeModal ? "none" : "flex" }}
     >
       <div
-        className="bg-red-500 rounded-full p-2 absolute -top-5 right-10 cursor-pointer"
+        className="p-2 absolute -top-5 right-10 bg-red-500 rounded-full cursor-pointer"
         onClick={() => setCloseModal(true)}
       >
-        <img src={removeCard} alt="" className="w-5" />
+        <img src="images/card-remove.svg" alt="remove" className="w-5" />
       </div>
-      <h2 className="mt-10 text-productPrice">
+      <h2 className="mt-10 text-productPrice">{feedbakTitle}</h2>
-        نظر شما نسبت به رابط کاربری سایت جدیدمون چیه؟
-      </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`}
+            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)}
           >
@@ -47,7 +38,7 @@ const Feedback = ({ feedbacks }) => {
               {item.name}
             </p>
             <img
-              src={upwardArrow}
+              src="images/gray-upward-icon.svg"
               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"
@@ -75,25 +66,27 @@ const Feedback = ({ feedbacks }) => {
 export default Feedback;
 
 Feedback.defaultProps = {
+  feedbakTitle: "نظر شما نسبت به رابط کاربری سایت جدیدمون چیه؟",
+
   feedbacks: [
     {
-      icon: heartEmoji,
+      icon: "images/heart-emoji.svg",
       name: "عالی",
     },
     {
-      icon: smileEmoji,
+      icon: "images/smile-emoji.svg",
       name: "خوب",
     },
     {
-      icon: speechlessEmoji,
+      icon: "images/speechless-emoji.svg",
       name: "اوکیه",
     },
     {
-      icon: sadEmoji,
+      icon: "images/sad-emoji.svg",
       name: "بد",
     },
     {
-      icon: suspiciousEmoji,
+      icon: "images/suspicious-emoji.svg",
       name: "خیلی بد",
     },
   ],

src/redux/data.js

@@ -15,6 +15,7 @@ import CounterDesign from "../components/CounterDesign";
 import CourseList from "../components/CourseList";
 import ProductFilter from "../components/ProductFilter";
 import Features from "../components/Features";
+import Feedback from "../components/Feedback";
 
 // mini components
 import MiniComponents from "../components/MiniComponents";
@@ -279,6 +280,16 @@ const components = [
       code: null,
     },
   },
+  {
+    name: "Feedback",
+    author: "Andalib",
+    props: [],
+    content: {
+      name: "Feedback",
+      component: <Feedback />,
+      code: null,
+    },
+  },
   // mini components
   {
     name: "Mini Components",