✨ Made addable integrations dynamic

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>
+    </>
+  );
+};