0ct0pu5/homepage
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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.widget && <Widget service={service} />}
{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>
</Disclosure>
<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>
{service.widget && <Widget service={service} />}
</div>
</li>
);
}