✨ Made addable integrations dynamic

src/components/Dashboard/Modals/SelectElement/Components/IntegrationsTab/AvailableIntegrationsTab.tsx

@@ -1,69 +0,0 @@
-import { Grid, Text } from '@mantine/core';
-import {
-  IconArrowsUpDown,
-  IconCalendarTime,
-  IconClock,
-  IconCloudRain,
-  IconFileDownload,
-} from '@tabler/icons';
-import { useTranslation } from 'next-i18next';
-import { GenericAvailableElementType } from '../Shared/GenericElementType';
-import { SelectorBackArrow } from '../Shared/SelectorBackArrow';
-
-interface AvailableIntegrationElementsProps {
-  onClickBack: () => void;
-}
-
-export const AvailableIntegrationElements = ({
-  onClickBack,
-}: AvailableIntegrationElementsProps) => {
-  const { t } = useTranslation('layout/element-selector/selector');
-  return (
-    <>
-      <SelectorBackArrow onClickBack={onClickBack} />
-
-      <Text mb="md" color="dimmed">
-        Integrations interact with your apps, to provide you with more control over your
-        applications. They usually require a few configurations before use.
-      </Text>
-
-      <Grid>
-        <GenericAvailableElementType
-          name="Usenet downloads"
-          description="Display and manage your Usenet downloads directly from Homarr"
-          image={<IconFileDownload />}
-        />
-        <GenericAvailableElementType
-          name="BitTorrent downloads"
-          description="Display and manage your Torrent downloads directly from Homarr"
-          image={<IconFileDownload />}
-        />
-        <GenericAvailableElementType
-          name="Calendar"
-          description="Integrate your Sonarr, Radarr, Lidarr and Readarr releases in a calendar"
-          image={<IconCalendarTime />}
-        />
-        <GenericAvailableElementType
-          name="Date & Time"
-          description="Display the current date & time"
-          image={<IconClock />}
-        />
-        <GenericAvailableElementType
-          name="Weather"
-          description="Display the current weather of a specified location"
-          image={<IconCloudRain />}
-        />
-        <GenericAvailableElementType
-          name="Dash."
-          description="Display hardware data in realtime on your dashboard"
-          image="https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/dashdot.png"
-        />
-        <GenericAvailableElementType
-          name="Torrrent network traffic"
-          description="Display the current download & upload of your torrent clients"
-          image={<IconArrowsUpDown />}
-        />
-      </Grid>
-    </>
-  );
-};

src/components/Dashboard/Modals/SelectElement/Components/Shared/GenericElementType.tsx

@@ -1,13 +1,13 @@
-import { Box, Button, Card, Center, Grid, Stack, Text, UnstyledButton } from '@mantine/core';
-import { IconChevronRight } from '@tabler/icons';
+import { Button, Card, Center, Grid, Stack, Text } from '@mantine/core';
+import { TablerIcon } from '@tabler/icons';
 import Image from 'next/image';
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { useStyles } from './styles';
 
 interface GenericAvailableElementTypeProps {
   name: string;
   description?: string;
-  image: string | ReactNode;
+  image: string | TablerIcon;
   disabled?: boolean;
 }
 
@@ -19,13 +19,8 @@ export const GenericAvailableElementType = ({
 }: GenericAvailableElementTypeProps) => {
   const { classes } = useStyles();
 
-  const Icon = () => {
-    if (React.isValidElement(image)) {
-      return <>{image}</>;
-    }
-
-    return <Image src={image as string} width={24} height={24} />;
-  };
+  const Icon =
+    typeof image === 'string' ? () => <Image src={image} width={24} height={24} /> : image;
 
   return (
     <Grid.Col span={3}>

src/components/Dashboard/Modals/SelectElement/Components/StaticElementsTab/AvailableStaticElementsTab.tsx

@@ -23,7 +23,7 @@ export const AvailableStaticTypes = ({ onClickBack }: AvailableStaticTypesProps)
         <GenericAvailableElementType
           name="Static Text"
           description="Display a fixed string on your dashboard"
-          image={<IconCursorText />}
+          image={IconCursorText}
         />
       </Grid>
     </>

src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/AvailableWidgetsTab.tsx

@@ -0,0 +1,39 @@
+import { Grid, Text } from '@mantine/core';
+import {
+  IconArrowsUpDown,
+  IconCalendarTime,
+  IconClock,
+  IconCloudRain,
+  IconFileDownload,
+} from '@tabler/icons';
+import { useTranslation } from 'next-i18next';
+import widgets from '../../../../../../widgets';
+import { GenericAvailableElementType } from '../Shared/GenericElementType';
+import { SelectorBackArrow } from '../Shared/SelectorBackArrow';
+import { WidgetElementType } from './WidgetElementType';
+
+interface AvailableIntegrationElementsProps {
+  onClickBack: () => void;
+}
+
+export const AvailableIntegrationElements = ({
+  onClickBack,
+}: AvailableIntegrationElementsProps) => {
+  const { t } = useTranslation('layout/element-selector/selector');
+  return (
+    <>
+      <SelectorBackArrow onClickBack={onClickBack} />
+
+      <Text mb="md" color="dimmed">
+        Widgets interact with your apps, to provide you with more control over your applications.
+        They usually require a few configurations before use.
+      </Text>
+
+      <Grid>
+        {Object.entries(widgets).map(([k, v]) => (
+          <WidgetElementType key={k} id={k} image={v.icon} />
+        ))}
+      </Grid>
+    </>
+  );
+};

src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/WidgetElementType.tsx

@@ -0,0 +1,26 @@
+import { Button, Card, Center, Grid, Stack, Text } from '@mantine/core';
+import { TablerIcon } from '@tabler/icons';
+import { useTranslation } from 'next-i18next';
+import Image from 'next/image';
+import React, { ReactNode } from 'react';
+import { AvailableElementTypes } from '../Overview/AvailableElementsOverview';
+import { GenericAvailableElementType } from '../Shared/GenericElementType';
+
+interface WidgetElementTypeProps {
+  id: string;
+  image: string | TablerIcon;
+  disabled?: boolean;
+}
+
+export const WidgetElementType = ({ id, image, disabled }: WidgetElementTypeProps) => {
+  const { t } = useTranslation(`modules/${id}`);
+
+  return (
+    <GenericAvailableElementType
+      name={t('descriptor.name')}
+      description={t('descriptor.description')}
+      image={image}
+      disabled={disabled}
+    />
+  );
+};