✨ Add new config format

src/components/Dashboard/Tiles/Service/Service.tsx

@@ -0,0 +1,91 @@
+import { Card, Center, Text, UnstyledButton } from '@mantine/core';
+import { NextLink } from '@mantine/next';
+import { createStyles } from '@mantine/styles';
+import { ServiceType } from '../../../../types/service';
+import { useCardStyles } from '../../../layout/useCardStyles';
+import { useEditModeStore } from '../../Views/store';
+import { BaseTileProps } from '../type';
+
+interface ServiceTileProps extends BaseTileProps {
+  service: ServiceType;
+}
+
+export const ServiceTile = ({ className, service }: ServiceTileProps) => {
+  const isEditMode = useEditModeStore((x) => x.enabled);
+
+  const { cx, classes } = useStyles();
+
+  const {
+    classes: { card: cardClass },
+  } = useCardStyles();
+
+  const inner = (
+    <>
+      <Text align="center" weight={500} size="md" className={classes.serviceName}>
+        {service.name}
+      </Text>
+      <Center style={{ height: '75%', flex: 1 }}>
+        <img className={classes.image} src={service.appearance.iconUrl} alt="" />
+      </Center>
+    </>
+  );
+
+  return (
+    <Card className={cx(className, cardClass)} withBorder radius="lg" shadow="md">
+      {isEditMode &&
+        {
+          /*<AppShelfMenu service={service} />*/
+        }}{' '}
+      {/* TODO: change to serviceMenu */}
+      {!service.url || isEditMode ? (
+        <UnstyledButton
+          className={classes.button}
+          style={{ pointerEvents: isEditMode ? 'none' : 'auto' }}
+        >
+          {inner}
+        </UnstyledButton>
+      ) : (
+        <UnstyledButton
+          style={{ pointerEvents: isEditMode ? 'none' : 'auto' }}
+          component={NextLink}
+          href={service.url}
+          target={service.behaviour.isOpeningNewTab ? '_blank' : '_self'}
+          className={cx(classes.button, classes.link)}
+        >
+          {inner}
+        </UnstyledButton>
+      )}
+      {/*<ServicePing service={service} />*/}
+    </Card>
+  );
+};
+
+const useStyles = createStyles((theme, _params, getRef) => {
+  return {
+    image: {
+      ref: getRef('image'),
+      maxHeight: '80%',
+      maxWidth: '80%',
+      transition: 'transform 100ms ease-in-out',
+    },
+    serviceName: {
+      ref: getRef('serviceName'),
+    },
+    button: {
+      height: '100%',
+      width: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      gap: 4,
+    },
+    link: {
+      [`&:hover .${getRef('image')}`]: {
+        // TODO: add styles for image when hovering card
+      },
+      [`&:hover .${getRef('serviceName')}`]: {
+        // TODO: add styles for service name when hovering card
+      },
+    },
+  };
+});

src/components/Dashboard/Tiles/TileWrapper.tsx

@@ -0,0 +1,48 @@
+import { ReactNode, RefObject } from 'react';
+
+interface GridstackTileWrapperProps {
+  id: string;
+  type: 'service' | 'module';
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
+  minWidth?: number;
+  minHeight?: number;
+  maxWidth?: number;
+  maxHeight?: number;
+  itemRef: RefObject<HTMLDivElement>;
+  children: ReactNode;
+}
+
+export const GridstackTileWrapper = ({
+  id,
+  type,
+  x,
+  y,
+  width,
+  height,
+  minWidth,
+  minHeight,
+  maxWidth,
+  maxHeight,
+  children,
+  itemRef,
+}: GridstackTileWrapperProps) => (
+  <div
+    className="grid-stack-item"
+    data-type={type}
+    data-id={id}
+    gs-x={x}
+    gs-y={y}
+    gs-w={width}
+    gs-h={height}
+    gs-min-w={minWidth}
+    gs-min-h={minHeight}
+    gs-max-w={maxWidth}
+    gs-max-h={maxHeight}
+    ref={itemRef}
+  >
+    {children}
+  </div>
+);

src/components/Dashboard/Tiles/definition.tsx

@@ -0,0 +1,76 @@
+import { IntegrationsType } from '../../../types/integration';
+import { ServiceTile } from './Service/Service';
+/*import { CalendarTile } from './calendar';
+import { ClockTile } from './clock';
+import { DashDotTile } from './dash-dot';
+import { WeatherTile } from './weather';*/
+
+type TileDefinitionProps = {
+  [key in keyof IntegrationsType | 'service']: {
+    minWidth?: number;
+    minHeight?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    component: React.ElementType;
+  };
+};
+
+// TODO: change components for other modules
+export const Tiles: TileDefinitionProps = {
+  service: {
+    component: ServiceTile,
+    minWidth: 2,
+    maxWidth: 12,
+    minHeight: 2,
+    maxHeight: 12,
+  },
+  bitTorrent: {
+    component: CalendarTile,
+    minWidth: 4,
+    maxWidth: 12,
+    minHeight: 5,
+    maxHeight: 12,
+  },
+  calendar: {
+    component: CalendarTile,
+    minWidth: 4,
+    maxWidth: 12,
+    minHeight: 5,
+    maxHeight: 12,
+  },
+  clock: {
+    component: ClockTile,
+    minWidth: 4,
+    maxWidth: 12,
+    minHeight: 2,
+    maxHeight: 12,
+  },
+  dashDot: {
+    component: DashDotTile,
+    minWidth: 4,
+    maxWidth: 9,
+    minHeight: 5,
+    maxHeight: 14,
+  },
+  torrentNetworkTraffic: {
+    component: CalendarTile,
+    minWidth: 4,
+    maxWidth: 12,
+    minHeight: 5,
+    maxHeight: 12,
+  },
+  useNet: {
+    component: CalendarTile,
+    minWidth: 4,
+    maxWidth: 12,
+    minHeight: 5,
+    maxHeight: 12,
+  },
+  weather: {
+    component: WeatherTile,
+    minWidth: 4,
+    maxWidth: 12,
+    minHeight: 2,
+    maxHeight: 12,
+  },
+};

src/components/Dashboard/Tiles/type.ts

@@ -0,0 +1,3 @@
+export interface BaseTileProps {
+  className?: string;
+}