Create Tokenomy App

# Mobile / Webview

## Overview

Mobile/webview layout is a user interface layout designed for mobile or web applications that are primarily displayed within a webview or browser window. A webview is essentially a container that allows a mobile application to display web content without the user having to leave the application.

## How to use

Here we use mobile layout. The installation method is as follows below.

{% hint style="info" %}
Mobile layout use mode [Per-Page Layouts](https://nextjs.org/docs/basic-features/layouts#per-page-layouts)
{% endhint %}

Mobile layout component is split into several sections:

* `Header`: Component which represents the main navigation bar of the layout.
* `Main`: Contains the content of each page and all prop passed from the page component.
* `Footer`: Component which represents the footer of the layout.

### Step 1: Create the layout split component

First, create a few new files in `src/layouts/MobileLayout` directory. This will be the parent folder component that wraps around each component layout.

```
layouts/MobileLayout
├── Header
│   ├── <another split code>
│   └── index.tsx
├── Main
│   ├── <another split code>
│   └── index.tsx
├── Footer
│   ├── <another split code>
│   └── index.tsx
└── index.tsx
```

{% code title="Header/index.tsx" %}

```tsx
import React from "react";

interface Props {
  children?: React.ReactNode;
}

const Header: React.FC<Props> = ({ children = <p>Header</p> }) => {
  return <header>{children}</header>;
};

export default Header;
```

{% endcode %}

{% code title="Main/index.tsx" %}

```tsx
import React from "react";

interface Props {
  children: React.ReactNode;
}

const Main: React.FC<Props> = ({ children }) => {
  return <main>{children}</main>;
};

export default Main;
```

{% endcode %}

{% code title="Footer/index.tsx" %}

```tsx
import React from "react";

interface Props {
  children?: React.ReactNode;
}

const Footer: React.FC<Props> = ({ children = <p>Footer</p> }) => {
  return <footer>{children}</footer>;
};

export default Footer;
```

{% endcode %}

In each split it can be chunked again into smaller code sections.

### Step 2: Create the parent layout component

Next, create a new file for parent layout component, such as `index.tsx`, also in your `src/layouts/MobileLayout` directory.

```tsx
// Vendors
import React from "react";

// Components
import Header from "./Header";
import Main from "./Main";
import Footer from "./Footer";

interface MobileLayoutProps extends React.PropsWithChildren<{}> {
  // Add any other props your component needs
}

const MobileLayout = (props: MobileLayoutProps) => {
  return (
    <>
      <Header />
      <Main>{props.children}</Main>
      <Footer />
    </>
  );
};

export default MobileLayout;
```

### Step 3: Create the Page Component

Next, create a new file for your page component, such as `index.tsx`, also in your `src/components/page/Homepage` directory. This component will be wrapped by the `MobileLayout` component.

```tsx
// Vendors
import React from 'react';

const Homepage = () => {
  return (
    <>
      Homepage
    </>
  );
}

export default Homepage;
```

### Step 4: Add the Page to Your App

Finally, create a new file for your page component, such as `index.tsx`, also in your `src/pages` directory.

```tsx
// Vendors
import React from 'react';
import Head from "next/head";
import type { ReactElement } from "react";
import type { NextPageWithLayout } from "./_app";

// Layouts
import MobileLayout from "@/layouts/MobileLayout";

// Components
import Homepage from "@/components/page/Homepage";

const Home: NextPageWithLayout = () => {
  return (
    <>
      <Head>
        <title>Create Tokenomy App</title>
        <meta name="description" content="Generated by create tokenomy app" />
      </Head>
      <Homepage />
    </>
  );
}

Home.getLayout = function getLayout(page: ReactElement) {
  return <MobileLayout>{page}</MobileLayout>;
};

export default Home;
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://tokenomy.gitbook.io/boilerplate-code/features/layouts/mobile-webview.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.