Customized

This section provides guidance on laying out a customized page.

Overview

Customized layout is a user interface design that is tailored to the specific needs and preferences of a particular user or group of users. It is often used in software applications, websites, and other digital products to provide a personalized experience that meets the unique requirements of each user.

How to use

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

Customized layout use mode Per-Page Layouts

Customized 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/CustomizedLayout directory. This will be the parent folder component that wraps around each component layout.

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

Header/index.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;

Main/index.tsx

import React from "react";

interface Props {
  children: React.ReactNode;
}

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

export default Main;

Footer/index.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;

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/CustomizedLayout directory.

// Vendors
import React from "react";

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

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

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

export default CustomizedLayout;

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 CustomizedLayout component.

// 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.

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

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

// 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 <CustomizedLayout>{page}</CustomizedLayout>;
};

export default Home;

PreviousDashboard NextState Management

Last updated 2 years ago