You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

39 lines
1.3 KiB

import React, { useState } from "react";
import { ToggleColumns } from "./ToggleColumns";
import settings from "./settings.svg";
export const Settings = ({ allColumns, getToggleHideAllColumnsProps }) => {
const [openModal, setOpenModal] = useState(false);
console.log(openModal);
return (
<section>
<div
onClick={() => setOpenModal(true)}
data-modal-toggle="large-modal"
style={{ backgroundColor: "#F9FBFF" }}
className="mr-2 flex flex-col items-center justify-center p-1 rounded"
>
<img src={settings} className="w-6 h-6 cursor-pointer" />
</div>
{/* modal */}
<div
className={`cursor-pointer w-screen h-screen backdrop-filter backdrop-blur-lg bg-opacity-90 bg-gray-600 flex items-center justify-center fixed left-0 top-0
${openModal ? "opacity-80" : "opacity-0 pointer-events-none"}`}
onClick={() => setOpenModal(false)}
>
<div
className="absolute bg-white w-6/12 p-4 rounded"
style={{ top: "10%" }}
onClick={(e) => e.stopPropagation()}
>
<ToggleColumns
allColumns={allColumns}
getToggleHideAllColumnsProps={getToggleHideAllColumnsProps}
/>
</div>
</div>
</section>
);
};