🎨 Improved changeability of wrappers with new wrapper content component

src/components/Dashboard/Wrappers/WrapperContent.tsx

@@ -0,0 +1,60 @@
+import { GridStack } from 'fily-publish-gridstack';
+import { MutableRefObject, RefObject } from 'react';
+import { AppType } from '../../../types/app';
+import Widgets from '../../../widgets';
+import { IWidget, IWidgetDefinition } from '../../../widgets/widgets';
+import { Tiles } from '../Tiles/tilesDefinitions';
+import { GridstackTileWrapper } from '../Tiles/TileWrapper';
+
+interface WrapperContentProps {
+  apps: AppType[];
+  widgets: IWidget<string, any>[];
+  refs: {
+    wrapper: RefObject<HTMLDivElement>;
+    items: MutableRefObject<Record<string, RefObject<HTMLDivElement>>>;
+    gridstack: MutableRefObject<GridStack | undefined>;
+  };
+}
+
+export const WrapperContent = ({ apps, refs, widgets }: WrapperContentProps) => {
+  return (
+    <>
+      {apps?.map((app) => {
+        const { component: TileComponent, ...tile } = Tiles['app'];
+        return (
+          <GridstackTileWrapper
+            id={app.id}
+            type="app"
+            key={app.id}
+            itemRef={refs.items.current[app.id]}
+            {...tile}
+            {...app.shape.location}
+            {...app.shape.size}
+          >
+            <TileComponent className="grid-stack-item-content" app={app} />
+          </GridstackTileWrapper>
+        );
+      })}
+      {widgets.map((widget) => {
+        const definition = Widgets[widget.id as keyof typeof Widgets] as
+          | IWidgetDefinition
+          | undefined;
+        if (!definition) return null;
+
+        return (
+          <GridstackTileWrapper
+            type="widget"
+            key={widget.id}
+            itemRef={refs.items.current[widget.id]}
+            id={definition.id}
+            {...definition.gridstack}
+            {...widget.shape.location}
+            {...widget.shape.size}
+          >
+            <definition.component className="grid-stack-item-content" widget={widget} />
+          </GridstackTileWrapper>
+        );
+      })}
+    </>
+  );
+};