dominik/homepage-plus
1
0
Fork 0
mirror of https://github.com/DI0IK/homepage-plus.git synced 2025-07-07 06:08:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor docker stats open/close

Browse source
This commit is contained in:
Ben Phelps 2022-09-25 19:38:02 +03:00
parent 50fe6041f0
commit 3ae4113043
1 changed files with 56 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/components/services/item.jsx
View file

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