53 lines
1.4 KiB
JavaScript
53 lines
1.4 KiB
JavaScript
"use client";
|
|
|
|
import AppContext from "@ctx/AppContext";
|
|
import React, { useContext, useEffect, useState } from "react";
|
|
|
|
const page = ({ title, detail, value }) => {
|
|
const CTX = useContext(AppContext);
|
|
const permissionsChoose = CTX.state.permissionsChoose;
|
|
const roleData = CTX.state.roleData;
|
|
|
|
const [isChecked, setIsChecked] = useState(false);
|
|
|
|
const handlePermissionsChoose = (e) => {
|
|
setIsChecked(e.target.checked);
|
|
if (e.target.checked) {
|
|
CTX.setPermissionsChoose((current) => [...current, value]);
|
|
} else {
|
|
CTX.setPermissionsChoose(permissionsChoose.filter((el) => el !== value));
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!!permissionsChoose?.find((e) => e == value)) {
|
|
setIsChecked(true);
|
|
console.log("data");
|
|
}
|
|
}, [permissionsChoose]);
|
|
|
|
console.log(permissionsChoose);
|
|
return (
|
|
<div className="flex rtl mt-4">
|
|
<div>
|
|
<input
|
|
type="checkbox"
|
|
className="w-[40px] h-[40px] !rounded-xl mx-2 custom-checkbox mt-1"
|
|
checked={isChecked ? true : false}
|
|
defaultValue={isChecked}
|
|
name="hasSchengenRelative"
|
|
// onClick={checkBoxEvent}
|
|
onChange={(e) => handlePermissionsChoose(e)}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<h2 className="font-bold text-textMain-100">{title}</h2>
|
|
<p className="mb-0 text-textMain-100 text-right text-sm">{detail} </p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default page;
|