add support for custom and other remote icons

pull/34/head
Ben Phelps 2 years ago
parent a7dd6d965d
commit 3df1f6b766

@ -0,0 +1 @@
../config/icons

@ -1,30 +1,41 @@
import Image from "next/future/image";
import { useState } from "react";
import { Disclosure, Transition } from "@headlessui/react";
import { Disclosure } from "@headlessui/react";
import Status from "./status";
import Widget from "./widget";
import Docker from "./widgets/service/docker";
function resolveIcon(icon) {
if (icon.startsWith("http")) {
return `/api/proxy?url=${encodeURIComponent(icon)}`;
} else if (icon.startsWith("/")) {
return `/icons${icon}`;
} else {
if (icon.endsWith(".png")) {
return `https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${icon}`;
} else {
return `https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${icon}.png`;
}
}
}
export default function Item({ service }) {
return (
<li key={service.name} className="">
<Disclosure>
<div className="transition-all h-15 overflow-hidden mb-3 cursor-pointer p-1 rounded-md font-medium text-theme-700 hover:text-theme-800 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/40 bg-white/50 hover:bg-theme-300/10 dark:bg-white/5 dark:hover:bg-white/10">
<div className="flex">
<div
onClick={() => {
window.open(service.href, "_blank").focus();
}}
className="flex-shrink-0 flex items-center justify-center w-12 "
>
<Image
src={`https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${service.icon}`}
width={32}
height={32}
alt="logo"
/>
</div>
{service.icon && (
<div
onClick={() => {
window.open(service.href, "_blank").focus();
}}
className="flex-shrink-0 flex items-center justify-center w-12 "
>
<Image src={resolveIcon(service.icon)} width={32} height={32} alt="logo" />
</div>
)}
<div
onClick={() => {
window.open(service.href, "_blank").focus();

Loading…
Cancel
Save