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
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> |
|
); |
|
};
|
|
|