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,72 +27,75 @@ 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 " : " "
-          }transition-all h-15 mb-3 p-1 rounded-md font-medium text-theme-700 hover:text-theme-700/70 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-black/10 dark:shadow-black/20 bg-white/50 hover:bg-theme-300/20 dark:bg-white/10 dark:hover:bg-white/20`}
-        >
-          <div className="flex select-none">
-            {service.icon &&
-              (hasLink ? (
-                <a
-                  href={service.href}
-                  target={settings.target ?? "_blank"}
-                  rel="noreferrer"
-                  className="flex-shrink-0 flex items-center justify-center w-12 "
-                >
-                  <Image src={resolveIcon(service.icon)} width={32} height={32} alt="logo" />
-                </a>
-              ) : (
-                <div className="flex-shrink-0 flex items-center justify-center w-12 ">
-                  <Image src={resolveIcon(service.icon)} width={32} height={32} alt="logo" />
-                </div>
-              ))}
-
-            {hasLink ? (
+      <div
+        className={`${
+          hasLink ? "cursor-pointer " : " "
+        }transition-all h-15 mb-3 p-1 rounded-md font-medium text-theme-700 hover:text-theme-700/70 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-black/10 dark:shadow-black/20 bg-white/50 hover:bg-theme-300/20 dark:bg-white/10 dark:hover:bg-white/20`}
+      >
+        <div className="flex select-none">
+          {service.icon &&
+            (hasLink ? (
               <a
                 href={service.href}
                 target={settings.target ?? "_blank"}
                 rel="noreferrer"
-                className="flex-1 flex items-center justify-between rounded-r-md "
+                className="flex-shrink-0 flex items-center justify-center w-12 "
               >
-                <div className="flex-1 px-2 py-2 text-sm text-left">
-                  {service.name}
-                  <p className="text-theme-500 dark:text-theme-400 text-xs font-light">{service.description}</p>
-                </div>
+                <Image src={resolveIcon(service.icon)} width={32} height={32} alt="logo" />
               </a>
             ) : (
-              <div className="flex-1 flex items-center justify-between rounded-r-md ">
-                <div className="flex-1 px-2 py-2 text-sm text-left">
-                  {service.name}
-                  <p className="text-theme-500 dark:text-theme-400 text-xs font-light">{service.description}</p>
-                </div>
+              <div className="flex-shrink-0 flex items-center justify-center w-12 ">
+                <Image src={resolveIcon(service.icon)} width={32} height={32} alt="logo" />
               </div>
-            )}
+            ))}
 
-            {service.container && (
-              <Disclosure.Button
-                as="div"
-                className="flex-shrink-0 flex items-center justify-center w-12 cursor-pointer"
-              >
-                <Status service={service} />
-              </Disclosure.Button>
-            )}
-          </div>
-
-          <Disclosure.Panel>
-            <div className="w-full">
-              <Docker service={{ widget: { container: service.container, server: service.server } }} />
+          {hasLink ? (
+            <a
+              href={service.href}
+              target={settings.target ?? "_blank"}
+              rel="noreferrer"
+              className="flex-1 flex items-center justify-between rounded-r-md "
+            >
+              <div className="flex-1 px-2 py-2 text-sm text-left">
+                {service.name}
+                <p className="text-theme-500 dark:text-theme-400 text-xs font-light">{service.description}</p>
+              </div>
+            </a>
+          ) : (
+            <div className="flex-1 flex items-center justify-between rounded-r-md ">
+              <div className="flex-1 px-2 py-2 text-sm text-left">
+                {service.name}
+                <p className="text-theme-500 dark:text-theme-400 text-xs font-light">{service.description}</p>
+              </div>
             </div>
-          </Disclosure.Panel>
+          )}
+
+          {service.container && (
+            <button
+              type="button"
+              onClick={() => setStatsOpen(!statsOpen)}
+              className="flex-shrink-0 flex items-center justify-center w-12 cursor-pointer"
+            >
+              <Status service={service} />
+            </button>
+          )}
+        </div>
 
-          {service.widget && <Widget service={service} />}
+        <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>
+
+        {service.widget && <Widget service={service} />}
+      </div>
     </li>
   );
 }