feat: render footer as a component instead of render prop (#5970)

* feat: render footer as a component instead of render prop

* Export FooterCenter as footer

* remove useDevice export

* revert some changes

* remove

* add spec

* update specs

* parse children into a dictionary

* factor app footer components into a single file

* Add docs

* split app footer components

Co-authored-by: dwelle <luzar.david@gmail.com>

src/utils.ts

@@ -15,6 +15,7 @@ import { AppState, DataURL, LastActiveToolBeforeEraser, Zoom } from "./types";
 import { unstable_batchedUpdates } from "react-dom";
 import { isDarwin } from "./keys";
 import { SHAPES } from "./shapes";
+import React from "react";
 
 let mockDateTime: string | null = null;
 
@@ -686,3 +687,25 @@ export const queryFocusableElements = (container: HTMLElement | null) => {
       )
     : [];
 };
+
+export const ReactChildrenToObject = <
+  T extends {
+    [k in string]?:
+      | React.ReactPortal
+      | React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+  },
+>(
+  children: React.ReactNode,
+) => {
+  return React.Children.toArray(children).reduce((acc, child) => {
+    if (
+      React.isValidElement(child) &&
+      typeof child.type !== "string" &&
+      child?.type.name
+    ) {
+      // @ts-ignore
+      acc[child.type.name] = child;
+    }
+    return acc;
+  }, {} as Partial<T>);
+};