Dashboard

This section provides guidance on laying out a dashboard page.

Overview

Dashboard layout is a user interface design used to display important information or key performance indicators (KPIs) in a clear and concise manner. It is often used in business applications, data visualization tools, and analytics software to provide users with a real-time overview of their performance metrics.

How to use

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

Dashboard layout use mode Per-Page Layouts

Dashboard 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.
Sidebar: Component which represents the sidebar navigation of the layout.
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/DashboardLayout directory. This will be the parent folder component that wraps around each component layout.

layouts/DashboardLayout
├── Header
│   ├── <another split code>
│   └── index.tsx
├── Main
│   ├── <another split code>
│   └── index.tsx
├── Sidebar
│   ├── <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;

Sidebar/index.tsx

import React from "react";

interface Props {
  children: React.ReactNode;
}

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

export default Sidebar;

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

// Vendors
import React from "react";

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

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

const DashboardLayout = (props: DashboardLayoutProps) => {
  return (
    <>
      <Header />
      <div>
        <Main>{props.children}</Main>
        <Sidebar />
      </div>
      <Footer />
    </>
  );
};

export default DashboardLayout;

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 DashboardLayout 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 DashboardLayout from "@/layouts/DashboardLayout";

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

export default Home;

PreviousLanding NextCustomized

Last updated 2 years ago