refactor docker stats open/close

src/components/services/item.jsx

@@ -1,6 +1,6 @@
 import Image from "next/future/image";
-import { useContext } from "react";
-import { Disclosure } from "@headlessui/react";
+import classNames from "classnames";
+import { useContext, useState } from "react";
 
 import Status from "./status";
 import Widget from "./widget";
@@ -27,10 +27,10 @@ function resolveIcon(icon) {
 export default function Item({ service }) {
   const hasLink = service.href && service.href !== "#";
   const { settings } = useContext(SettingsContext);
+  const [statsOpen, setStatsOpen] = useState(false);
 
   return (
     <li key={service.name}>
-      <Disclosure>
       <div
         className={`${
           hasLink ? "cursor-pointer " : " "
@@ -75,24 +75,27 @@ export default function Item({ service }) {
           )}
 
           {service.container && (
-              <Disclosure.Button
-                as="div"
+            <button
+              type="button"
+              onClick={() => setStatsOpen(!statsOpen)}
               className="flex-shrink-0 flex items-center justify-center w-12 cursor-pointer"
             >
               <Status service={service} />
-              </Disclosure.Button>
+            </button>
           )}
         </div>
 
-          <Disclosure.Panel>
-            <div className="w-full">
+        <div
+          className={classNames(
+            statsOpen ? "max-h-[55px] opacity-100" : " max-h-[0] opacity-0",
+            "w-full overflow-hidden transition-all duration-300 ease-in-out"
+          )}
+        >
           <Docker service={{ widget: { container: service.container, server: service.server } }} />
         </div>
-          </Disclosure.Panel>
 
         {service.widget && <Widget service={service} />}
       </div>
-      </Disclosure>
     </li>
   );
 }