master
mahdi andalib 3 years ago
parent 4301e42428
commit a8fe6753d9
  1. 89
      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>
{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"
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"
checked
className="form-checkbox text-blue-500 bg-red-600"
onClick={() => setChecklist(checklist + 25)}
/>
<span className="text-sm mr-2">چک لیست ها</span>
<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",
},
],
};

Loading…
Cancel
Save