| 
						
						
							
								
							
						
						
					 | 
					 | 
					@ -5,9 +5,10 @@ import filter from './filter.svg'; | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					import settings from './settings.svg'; | 
					 | 
					 | 
					 | 
					import settings from './settings.svg'; | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					import arrow from './blue-arrow.svg'; | 
					 | 
					 | 
					 | 
					import arrow from './blue-arrow.svg'; | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					import plus from './plus.svg'; | 
					 | 
					 | 
					 | 
					import plus from './plus.svg'; | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					import { GlobalFilter } from './GlobalFilter'; | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					
 | 
					 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					export function EditButtons({buttons }) { | 
					 | 
					 | 
					 | 
					export function EditButtons({buttons }) { | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					  // const [openModal, setOpenModal] = useState(false);
 | 
					 | 
					 | 
					 | 
					  const [openModal, setOpenModal] = useState(false); | 
				
			
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					
 | 
					 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					    return ( | 
					 | 
					 | 
					 | 
					    return ( | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					      <div className="flex flex-row items-center justify-end"> | 
					 | 
					 | 
					 | 
					      <div className="flex flex-row items-center justify-end"> | 
				
			
			
		
	
	
		
		
			
				
					| 
						
						
						
							
								
							
						
					 | 
					 | 
					@ -15,12 +16,27 @@ export function EditButtons({buttons}) { | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					        {buttons.map((button,index) =>( | 
					 | 
					 | 
					 | 
					        {buttons.map((button,index) =>( | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					        <div className={`border border-blue-400 flex flex-row items-center justify-around p-1 rounded-sm bg-opacity-30 mx-1`} | 
					 | 
					 | 
					 | 
					        <div className={`border border-blue-400 flex flex-row items-center justify-around p-1 rounded-sm bg-opacity-30 mx-1`} | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					            style={{backgroundColor: button.backgroundColor}} | 
					 | 
					 | 
					 | 
					            style={{backgroundColor: button.backgroundColor}} | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					          // onClick={() => setOpenModal(true)}  
 | 
					 | 
					 | 
					 | 
					          onClick={() => setOpenModal(true)}  
 | 
				
			
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					        > | 
					 | 
					 | 
					 | 
					        > | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					          <p className={`text-sm ${button.textColor}`}>{button.title}</p> | 
					 | 
					 | 
					 | 
					          <p className={`text-sm ${button.textColor}`}>{button.title}</p> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					          <img src={button.logo} alt="" className={`cursor-pointer ${button.width} ${button.height} ${button.title === null ? "mr-0": "mx-2"}`} /> | 
					 | 
					 | 
					 | 
					          <img src={button.logo} alt="" className={`cursor-pointer ${button.width} ${button.height} ${button.title === null ? "mr-0": "mx-2"}`} /> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					        </div> | 
					 | 
					 | 
					 | 
					        </div> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					        ))} | 
					 | 
					 | 
					 | 
					        ))} | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					      {/* <GlobalFilter filterr={filter} setFilterr={setFilter}/> */} | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					      <div | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					        className={`cursor-pointer w-screen h-screen backdrop-filter backdrop-blur-lg flex items-center justify-center bg-gray-900 fixed left-0 top-0 duration-1000 transition-all
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					          ${openModal ? "opacity-80" : "opacity-0 pointer-events-none"} | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					        `}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					        onClick={() => setOpenModal(false)} | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					      > | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					              {/* <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} /> */} | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					              <div className="absolute " | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					                style={{top: "20%"}} | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					                onClick={(e) => e.stopPropagation()} | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					>              <GlobalFilter /> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					              </div> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					      </div> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					      </div> | 
					 | 
					 | 
					 | 
					      </div> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					    ); | 
					 | 
					 | 
					 | 
					    ); | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					  } | 
					 | 
					 | 
					 | 
					  } | 
				
			
			
		
	
	
		
		
			
				
					| 
						
							
								
							
						
						
						
					 | 
					 | 
					
  |