Created window manager

components/system/WindowManager.tsx

@@ -0,0 +1,14 @@
+import { ProcessConsumer } from 'contexts/process';
+import type { FC } from 'react';
+
+const WindowManager: FC = () => (
+  <ProcessConsumer>
+    {({ processes }) =>
+      Object.entries(processes).map(([id, { Component }]) => (
+        <Component key={id} />
+      ))
+    }
+  </ProcessConsumer>
+);
+
+export default WindowManager;

contexts/process.tsx

@@ -1,12 +1,22 @@
 import type { FC } from 'react';
+import { createContext, useState } from 'react';
+import type { Process } from 'types/utils/processDirectory';
 import processDirectory from 'utils/processDirectory';
 
-const ProcessLoader: FC = () => (
-  <>
-    {Object.entries(processDirectory).map(([id, { Component }]) => (
-      <Component key={id} />
-    ))}
-  </>
-);
+type ProcessContextState = {
+  processes: Partial<Process>;
+};
 
-export default ProcessLoader;
+const ProcessContext = createContext<ProcessContextState>({ processes: {} });
+
+export const ProcessProvider: FC = ({ children }) => {
+  const [processes] = useState(processDirectory);
+
+  return (
+    <ProcessContext.Provider value={{ processes }}>
+      {children}
+    </ProcessContext.Provider>
+  );
+};
+
+export const ProcessConsumer = ProcessContext.Consumer;

pages/index.tsx

@@ -1,6 +1,11 @@
-import ProcessLoader from 'contexts/process';
+import WindowManager from 'components/system/WindowManager';
+import { ProcessProvider } from 'contexts/process';
 import type { ReactElement } from 'react';
 
 export default function Home(): ReactElement {
-  return <ProcessLoader />;
+  return (
+    <ProcessProvider>
+      <WindowManager />
+    </ProcessProvider>
+  );
 }

types/utils/processDirectory.ts

@@ -1,7 +1,7 @@
 import type { ComponentType } from 'react';
 
 export type Process = {
-  Component: ComponentType;
+  Component: any; // ComponentType
 };
 
 export type Processes = {