update

src/components/PopupCard/index.js

@@ -1,10 +1,12 @@
 import React, { useState } from "react";
 import "./index.scss";
+import CancleIcon from "../CancleIcon";
 
 import cancleIcon from "./cancle-icon.svg";
 import calender from "./calender.svg";
+import OutlineInput from "../OutlineInput";
 
-const PopupCard = ({ textArea }) => {
+const PopupCard = ({ textArea, selectedChecklist, notSelectedChecklist }) => {
   const [activeInput, setActiveInput] = useState(false);
   const [checklist, setChecklist] = useState(0);
 
@@ -28,38 +30,25 @@ const PopupCard = ({ textArea }) => {
           <div className="w-8/12 mx-auto relative bg-white rounded-lg shadow dark:bg-gray-700">
             <div className="flex justify-between items-start p-5 rounded-t">
               {/* cancle icon */}
-              <div
-                type="button"
-                data-modal-toggle="defaultModal"
-                className="p-2 cursor-pointer rounded bg-[#F8F8F8]"
-              >
-                <img src={cancleIcon} className="w-4" />
-              </div>
+              <CancleIcon backgroundColor={"bg-[#F8F8F8]"} icon={cancleIcon} />
             </div>
             {/* modalBody */}
             <div className="w-11/12 mx-auto mt-3">
               {/* top */}
               <div className="flex">
                 {/* right */}
-                <input
-                  type="text"
-                  className="relative w-1/2 border-2 rounded-md text-sm h-12
-                focus:outline-none focus:border-[#22577E] focus:ring-1 focus:ring-[#22577E]"
-                  style={{
-                    color: "#00253A",
-                    borderColor: activeInput ? "#22577E" : "#06BACE",
-                  }}
+                <OutlineInput
+                  textClr={activeInput ? "text-[#22577E]" : "text-[#06BACE]"}
+                  borderClr={activeInput ? "#22577E" : "#06BACE"}
+                  outlineTitle={"نام کارت"}
+                  outlineTitleClr={activeInput ? "#22577E" : "#06BACE"}
+                  // onClick={() => setSelectedTab(true)}
                   onFocus={() => setActiveInput(true)}
                   onBlur={() => setActiveInput(false)}
                 />
-                <span
-                  className={`absolute right-20 -mt-2  bg-white text-xs px-2 font-bold`}
-                  style={{ color: activeInput ? "#22577E" : "#06BACE" }}
-                >
-                  نام کارت
-                </span>
+
                 {/* divider */}
-                <div className="bg-[#DBDBDB] w-0.5 mx-5"></div>
+                <div className="border border-[#DBDBDB] mx-5"></div>
                 {/* left */}
                 <div date-rangepicker className="flex items-center w-1/2">
                   <div className="relative w-full">
@@ -92,32 +81,40 @@ const PopupCard = ({ textArea }) => {
                     <div>
                       <input
                         type="checkbox"
-                        className="form-checkbox text-green-500"
+                        checked
+                        className="form-checkbox text-[#06BACE]"
                       />
                       <span className="text-sm mr-2">چک لیست ها</span>
                     </div>
                     {checklist}
                     <textarea class="resize-y rounded-md my-5 text-sm border-[#06BACE] focus:outline-none focus:border-[#22577E] focus:ring-1 focus:ring-[#22577E]"></textarea>
-                    <div>
-                      <input
-                        type="checkbox"
-                        className="form-checkbox text-green-500"
-                        onClick={() => setChecklist(checklist + 25)}
-                      />
-                      <span className="text-sm mr-2">چک لیست ها</span>
-                    </div>
-                    <div>
-                      <input
-                        type="checkbox"
-                        className="form-checkbox text-green-500"
-                        onClick={() => setChecklist(checklist + 25)}
-                      />
-                      <span className="text-sm mr-2">چک لیست ها</span>
-                    </div>
+                    {selectedChecklist.slice(0, 1).map((item, index) => (
+                      <div>
+                        <input
+                          // checked={checklist ? true : false}
+                          // onClick={() => setChecklist(checklist + 25)}
+                          // onChange={(e) =>
+                          //   e.target.checked === true
+                          //     ? checklist - 25
+                          //     : checklist + 25
+                          // }
+                          // onClick={() =>
+                          //   setChecklist(
+                          //     checked === true ? checklist - 25 : checklist + 25
+                          //   )
+                          // }
+                          type="checkbox"
+                          checked
+                          className="form-checkbox text-blue-500 bg-red-600"
+                          onClick={() => setChecklist(checklist + 25)}
+                        />
+                        <span className="text-sm mr-2">{item.title}</span>
+                      </div>
+                    ))}
                   </div>
                 </div>
                 {/* divider */}
-                <div className="bg-[#DBDBDB] w-1 mx-5"></div>
+                <div className="border border-[#DBDBDB] mx-5"></div>
                 {/* left */}
                 <div date-rangepicker className="flex items-center w-1/2">
                   <div className="relative w-full">
@@ -145,4 +142,26 @@ export default PopupCard;
 PopupCard.defaultProps = {
   textArea:
     "جنگ اول خلیج فارس، جنگی به رهبری آمریکا و با همکاری ائتلافی از ۳۵ کشور مختلف بود که علیه عراق بعثی در واکنش به اشغال کویت توسط عراق انجام گرفت پایان جنگ ایران و عراق هم ‌زمان با بروز تشنّج عراق و کویت بود. ارتش عراق در زمان حکومت صدام حسین و حزب بعث عراق د",
+  selectedChecklist: [
+    {
+      title: "خرید شماره 1",
+    },
+    {
+      title: "خرید شماره 1",
+    },
+    {
+      title: "خرید شماره 3",
+    },
+  ],
+  notSelectedChecklist: [
+    {
+      title: "خرید شماره 1",
+    },
+    {
+      title: "خرید شماره 1",
+    },
+    {
+      title: "خرید شماره 3",
+    },
+  ],
 };