undefined
84 lines
2.7 KiB
React
84 lines
2.7 KiB
React
import React, { useState, useContext } from "react";
|
|
import { GlobalContext } from "@/globalContext";
|
|
import { useNavigate } from "react-router-dom";
|
|
import Icon from "./Icons";
|
|
import "suneditor/dist/css/suneditor.min.css";
|
|
|
|
const Faq = ({ data }) => {
|
|
const [showAnswer, setShowAnswer] = useState(false);
|
|
const { dispatch } = useContext(GlobalContext);
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<div className="w-full p-1">
|
|
<div className="flex justify-between">
|
|
<div></div>
|
|
<div>
|
|
<button
|
|
className="pr-2 bg-gradient-to-r from-[#33D4B7] to-[#0D9895] bg-clip-text text-transparent font-bold border-r border-gray-200"
|
|
onClick={() => {
|
|
navigate(`/admin/edit-faq/${data.id}`, {
|
|
state: data,
|
|
});
|
|
}}
|
|
>
|
|
Edit
|
|
</button>
|
|
<button
|
|
className="font-semibold text-sm py-2.5 text-center inline-flex items-center mr-2 mb-2"
|
|
onClick={() => {
|
|
dispatch({
|
|
type: "SHOWMODAL",
|
|
payload: {
|
|
showModal: true,
|
|
modalShowMessage: "Are you sure you want to delete this question?",
|
|
modalShowTitle: "Confirm Changes",
|
|
type: "BaasDelete",
|
|
modalBtnText: "Yes, Delete",
|
|
itemId: data.id,
|
|
table1: "faq",
|
|
backTo: "/admin/faq",
|
|
},
|
|
});
|
|
}}
|
|
>
|
|
<span className="ml-2"> Delete</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="py-2 px-4 bg-white bg-opacity-60 border-[1px] border-gray-200">
|
|
<div className="flex flex-wrap justify-between">
|
|
<div className="flex-1 p-2">
|
|
<div className={`${showAnswer ? " mb-4" : ""}`}>
|
|
<h4 className="text-lg font-semibold leading-normal">{data.question}</h4>
|
|
</div>
|
|
{showAnswer && (
|
|
<p
|
|
className="text-gray-600 font-medium sun-editor-editable"
|
|
dangerouslySetInnerHTML={{ __html: data.answer }}
|
|
></p>
|
|
)}
|
|
</div>
|
|
<div className="w-auto p-2">
|
|
{showAnswer ? (
|
|
<Icon
|
|
type="minus"
|
|
className="h-4 w-4 cursor-pointer"
|
|
onClick={() => setShowAnswer(!showAnswer)}
|
|
/>
|
|
) : (
|
|
<Icon
|
|
type="plus"
|
|
className="h-4 w-4 cursor-pointer"
|
|
onClick={() => setShowAnswer(!showAnswer)}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Faq;
|