revised the client dropdown menu using headlessUI

client/components/client/ClientCard.jsx

@@ -1,41 +1,25 @@
 import React, { useState } from "react";
+import { Menu } from "@headlessui/react";
+import DropdownCard from "./DropdownCard";
+
 import {
   EllipsisHorizontalIcon,
   PhoneIcon,
   EnvelopeIcon,
   MapPinIcon,
 } from "@heroicons/react/24/outline";
 const ClientCard = ({ client }) => {
-  const [isOpen, setisOpen] = useState(false);
   return (
     <section className="client-card">
       <div>
         <div className="relative flex justify-between">
           <h3 className="">{client.name}</h3>
-          <EllipsisHorizontalIcon
-            className="h-8 w-8 cursor-pointer stroke-1 text-accent hover:stroke-2"
-            onClick={() => setisOpen(!isOpen)}
-          />
-          {isOpen && (
-            <div className="w-40 z-[1] border-secondary rounded-lg absolute left-full mt-2 origin-top-right  rounded-md bg-primary   shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none shadow">
-              <a className="group flex items-center px-4 py-2 text-sm text-CCCFD2-700 hover:bg-[rgb(205,213,224,0.1)] hover:text-white hover:rounded-lg">
-                {" "}
-                <span>add outreach</span>
-              </a>
-              <a className="group flex items-center px-4 py-2 text-sm text-CCCFD2-700 hover:bg-[rgb(205,213,224,0.1)] hover:text-white hover:rounded-lg">
-                {" "}
-                <span>edit</span>
-              </a>
-              <a className="group flex items-center px-4 py-2 text-sm text-CCCFD2-700 hover:bg-[rgb(205,213,224,0.1)] hover:text-white hover:rounded-lg">
-                {" "}
-                <span>archive</span>
-              </a>
-              <a className="group flex items-center px-4 py-2 text-sm text-CCCFD2-700 hover:bg-[rgb(205,213,224,0.1)] hover:text-white hover:rounded-lg">
-                {" "}
-                <span>delete</span>
-              </a>
-            </div>
-          )}
+          <Menu>
+            <Menu.Button>
+              <EllipsisHorizontalIcon className="h-8 w-8 cursor-pointer stroke-1 text-accent hover:stroke-2" />
+            </Menu.Button>
+            <DropdownCard />
+          </Menu>
         </div>
 
         <hr />

client/components/client/DropdownCard.jsx

@@ -0,0 +1,35 @@
+"use client";
+import React from "react";
+import { Menu } from "@headlessui/react";
+
+function DropdownCard() {
+  return (
+    <Menu.Items
+      as="div"
+      className=" absolute left-full z-[1] mt-2 w-40 origin-top-right rounded-lg border-secondary bg-primary px-1  pb-1 pt-1  shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+    >
+      <Menu.Item>
+        <a className="text-CCCFD2-700 group flex items-center px-4 py-2 text-sm hover:rounded-lg hover:bg-[rgb(205,213,224,0.1)] hover:text-white">
+          <span>Add outreach</span>
+        </a>
+      </Menu.Item>
+      <Menu.Item>
+        <a className="text-CCCFD2-700 group flex items-center px-4 py-2 text-sm hover:rounded-lg hover:bg-[rgb(205,213,224,0.1)] hover:text-white">
+          <span>Edit</span>
+        </a>
+      </Menu.Item>
+      <Menu.Item>
+        <a className="text-CCCFD2-700 group flex items-center px-4 py-2 text-sm hover:rounded-lg hover:bg-[rgb(205,213,224,0.1)] hover:text-white">
+          <span>Archive</span>
+        </a>
+      </Menu.Item>
+      <Menu.Item>
+        <a className="text-CCCFD2-700 group flex items-center px-4 py-2 text-sm hover:rounded-lg hover:bg-[rgb(205,213,224,0.1)] hover:text-white">
+          <span>Delete</span>
+        </a>
+      </Menu.Item>
+    </Menu.Items>
+  );
+}
+
+export default DropdownCard;

client/package.json

@@ -10,6 +10,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@headlessui/react": "^1.7.17",
     "@heroicons/react": "^2.0.18",
     "@tailwindcss/typography": "^0.5.9",
     "autoprefixer": "10.4.15",