diff --git a/src/components/services/widget.jsx b/src/components/services/widget.jsx
index 62df9301..f16b5cb5 100644
--- a/src/components/services/widget.jsx
+++ b/src/components/services/widget.jsx
@@ -5,6 +5,7 @@ import Portainer from "./widgets/service/portainer";
import Emby from "./widgets/service/emby";
import Nzbget from "./widgets/service/nzbget";
import Docker from "./widgets/service/docker";
+import Pihole from "./widgets/service/pihole";
const widgetMappings = {
docker: Docker,
@@ -14,6 +15,7 @@ const widgetMappings = {
portainer: Portainer,
emby: Emby,
nzbget: Nzbget,
+ pihole: Pihole,
};
export default function Widget({ service }) {
diff --git a/src/components/services/widgets/service/pihole.jsx b/src/components/services/widgets/service/pihole.jsx
new file mode 100644
index 00000000..c477ca33
--- /dev/null
+++ b/src/components/services/widgets/service/pihole.jsx
@@ -0,0 +1,37 @@
+import useSWR from "swr";
+
+import Widget from "../widget";
+import Block from "../block";
+
+export default function Pihole({ service }) {
+ const config = service.widget;
+
+ function buildApiUrl(endpoint) {
+ const { url } = config;
+ return `${url}/admin/${endpoint}`;
+ }
+
+ const { data: piholeData, error: piholeError } = useSWR(buildApiUrl("api.php"));
+
+ if (piholeError) {
+ return ;
+ }
+
+ if (!piholeData) {
+ return (
+
+
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+ );
+}