reza merged feedback

master
Reza_ashrafi 3 years ago
parent 506641a96d
commit 258ac4bcf8
  1. 6
      src/components/Feedback/card-remove.svg
  2. 3
      src/components/Feedback/gray-upward-icon.svg
  3. 8
      src/components/Feedback/heart-emoji.svg
  4. 101
      src/components/Feedback/index.js
  5. 3
      src/components/Feedback/sad-emoji.svg
  6. 8
      src/components/Feedback/smile-emoji.svg
  7. 3
      src/components/Feedback/speechless-emoji.svg
  8. 8
      src/components/Feedback/suspicious-emoji.svg
  9. 2
      src/components/SidebarCategoryHover/index.js
  10. 11
      src/redux/data.js

@ -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>

After

Width:  |  Height:  |  Size: 417 B

@ -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>

After

Width:  |  Height:  |  Size: 172 B

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 29 KiB

@ -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: "خیلی بد",
},
],
};

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 26 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 26 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 24 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 28 KiB

@ -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() {

@ -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;

Loading…
Cancel
Save