You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
115 lines
3.9 KiB
115 lines
3.9 KiB
import Image from "next/future/image";
|
|
import { Disclosure } from "@headlessui/react";
|
|
import { useState } from "react";
|
|
|
|
import Status from "./status";
|
|
import Widget from "./widget";
|
|
import Docker from "./widgets/service/docker";
|
|
import Dropdown from "./dropdown";
|
|
|
|
function resolveIcon(icon) {
|
|
if (icon.startsWith("http")) {
|
|
return `/api/proxy?url=${encodeURIComponent(icon)}`;
|
|
}
|
|
|
|
if (icon.startsWith("/")) {
|
|
return icon;
|
|
}
|
|
|
|
if (icon.endsWith(".png")) {
|
|
return `https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${icon}`;
|
|
}
|
|
|
|
return `https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${icon}.png`;
|
|
}
|
|
|
|
export default function Item({ service }) {
|
|
const handleOnClick = () => {
|
|
if (service.href && service.href !== "#") {
|
|
window.open(service.href, "_blank").focus();
|
|
}
|
|
};
|
|
|
|
const cmcValues = [
|
|
{ label: "1 Hour", value: "1h" },
|
|
{ label: "1 Day", value: "24h" },
|
|
{ label: "7 Days", value: "7d" },
|
|
{ label: "30 Days", value: "30d" },
|
|
];
|
|
|
|
const [cmcV, cmcSet] = useState(cmcValues[0]);
|
|
|
|
const states = {
|
|
coinmarketcap: { value: cmcV, set: cmcSet },
|
|
};
|
|
|
|
const hasLink = service.href && service.href !== "#";
|
|
|
|
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 ? (
|
|
<button
|
|
type="button"
|
|
onClick={handleOnClick}
|
|
className="flex-shrink-0 flex items-center justify-center w-12 "
|
|
>
|
|
<Image src={resolveIcon(service.icon)} width={32} height={32} alt="logo" />
|
|
</button>
|
|
) : (
|
|
<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 ? (
|
|
<button
|
|
type="button"
|
|
onClick={handleOnClick}
|
|
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-extralight">{service.description}</p>
|
|
</div>
|
|
</button>
|
|
) : (
|
|
<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-extralight">{service.description}</p>
|
|
</div>
|
|
</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>
|
|
)}
|
|
{service?.widget?.type === "coinmarketcap" && <Dropdown state={states.coinmarketcap} options={cmcValues} />}
|
|
</div>
|
|
|
|
<Disclosure.Panel>
|
|
<div className="w-full">
|
|
<Docker service={{ widget: { container: service.container, server: service.server } }} />
|
|
</div>
|
|
</Disclosure.Panel>
|
|
|
|
{service.widget && <Widget state={states[service?.widget?.type]} service={service} />}
|
|
</div>
|
|
</Disclosure>
|
|
</li>
|
|
);
|
|
}
|