diable buttons in no board

sasanqc · Jun 24, 2023 · db601f6 · db601f6
1 parent b9aa1ed
commit db601f6
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/components/UI/Dropdown.tsx b/components/UI/Dropdown.tsx
@@ -2,8 +2,9 @@ import React, { useRef, useState, useEffect } from "react";
 import VerticalElipsisIcon from "@/icons/icon-vertical-ellipsis.svg";
 interface DropdownProps {
   items: { label: string; className: string; onClick: () => void }[];
+  disable?: boolean;
 }
-const Dropdown: React.FC<DropdownProps> = ({ items }) => {
+const Dropdown: React.FC<DropdownProps> = ({ items, disable = false }) => {
   const menuRef = useRef<HTMLDivElement>(null);
   const [menuIsOpoen, setMenuIsOpen] = useState(false);
   const handleClickedOnBackdrop = (e: MouseEvent) => {
@@ -23,8 +24,13 @@ const Dropdown: React.FC<DropdownProps> = ({ items }) => {
   return (
     <div className="relative z-30" ref={menuRef}>
       <div
-        className="cursor-pointer p-2 dark:hover:bg-black1  hover:bg-gray1 rounded-md transition"
-        onClick={() => setMenuIsOpen(true)}
+        className={`${
+          disable ? "cursor-not-allowed" : "cursor-pointer"
+        } p-2 dark:hover:bg-black1  hover:bg-gray1 rounded-md transition`}
+        onClick={() => {
+          if (disable) return;
+          setMenuIsOpen(true);
+        }}
       >
         <VerticalElipsisIcon />
       </div>

diff --git a/layout/Header.tsx b/layout/Header.tsx
@@ -35,6 +35,7 @@ const Header = () => {
               onClick={() => dispatch(setActiveModal(ModalEnum.CREATE_TASK))}
             />
             <Dropdown
+              disable={data?.boards.length === 0}
               items={[
                 {
                   label: "Edit Board",
@@ -77,6 +78,7 @@ const Header = () => {
             <AddIcon />
           </button>
           <Dropdown
+            disable={data?.boards.length === 0}
             items={[
               {
                 label: "Edit Board",