update docs

docs/ModConf/components/Image.md

@@ -0,0 +1,34 @@
+# Image API
+
+When you want to use images that stored on your device then you can use the `<Image />` component to access them
+
+## Setup
+
+```js
+import { Image } from "@mmrl/ui";
+```
+
+## Usage
+
+```js
+function App() {
+  // type is actually not required
+  return (
+    <Page>
+      <Image src="/sdcard/image.png" type="image/png" />
+    </Page>
+  );
+}
+```
+
+## API
+
+| Attr        | Required | Type      |
+| ----------- | -------- | --------- |
+| `src`       | Yes      | `string`  |
+| `type`      | No       | `string`  |
+| `shadow`    | No       | `number`  |
+| `title`     | No       | `string`  |
+| `noOpen`    | No       | `boolean` |
+| `modFSAdds` | No       | `object`  |
+| `sx`        | No       | `SxProps` |

docs/ModConf/hooks/useActivity.md

@@ -0,0 +1,72 @@
+# Activity Managment
+
+TODO
+
+## Setup
+
+```js
+import { useActivity } from "@mmrl/hooks";
+```
+
+## Usage
+
+```js
+import React from "react";
+import { useActivity } from "@mmrl/hooks";
+import { Page, Toolbar } from "@mmrl/ui";
+import { Button } from "@mui/material";
+
+function App() {
+  const { context } = useActivtiy();
+
+  const handleOpen = () => {
+    context.pushPage({
+      component: NewPage,
+      // don't forget this!
+      key: "MyNewPage",
+      // if your page has props
+      props: {},
+      // push any object here
+      extra: {
+        title: "Hello",
+      },
+    });
+  };
+
+  return (
+    <Page>
+      <Button onClick={handleOpen}>Push</Button>
+    </Page>
+  );
+}
+
+const allowBack = false;
+
+function NewPage() {
+  // get here your extras
+  const { context, extra } = useActivtiy();
+
+  return (
+    <Page
+      // if you want override the back event
+      onDeviceBackButton={(e) => {
+        if (allowBack) {
+          e.callParentHandler();
+        }
+      }}
+      renderToolbar={() => {
+        return (
+          <Toolbar>
+            <Toolbar.Left>
+              <Toolbar.BackButton onClick={context.popPage} />
+            </Toolbar.Left>
+            <Toolbar.Center>{extra.title}</Toolbar.Center>
+          </Toolbar>
+        );
+      }}
+    >
+      Hello World
+    </Page>
+  );
+}
+```