Skip to main content

Add page's content

tip

Every page content should use this folder template. Everythings in modules will be used to build the content for a specific page.

.
├── modules
│   ├── Articles
│           ├── Elements
│           │   └── ArticlesList
│           ├── Forms
│           ├── PagesContainer
│           │   └── Articles
│           └── Static

Find or create a new folder in modules that best suit your new page category.

Static​

This is all static content that will need all pages containers.

Here we will define all routes and breadcrumb name in articlesRoutes.ts . It is used in the HeaderContent component for the breadcrumb section.

tip

Each object should at least have a breadcrumbName key. If you had a path key the breadcrumb element will become clickable automatically.

modules/Articles/Static/articlesRoutes.ts
export const articlesRoutes = [
  {
    breadcrumbName: "menu:configuration",
  },
  {
    breadcrumbName: "menu:articles",
  },
];

export const articlesSubRoutes = [
  ...articlesRoutes,
  {
    path: "/articles",
    breadcrumbName: "menu:articles",
  },
];
caution

For internationnalization, the breadcrumbName key should match this format in order to work : namespaces:translation (menu:articles). See more about Internationnalization

By following the same logic create a newpageRoutes.ts.

Pages Containers​

A page and a page container should have the same name with PascalCase convention.

.
├── modules
│   ├── Articles
│           ├── PagesContainer
│                   └── Articles.tsx
├── pages
│   ├── articles.tsx
tip

For articles.tsx page we have Articles.tsx page container

A page container is compose of two section :

modules/Articles/PagesContainer/Articles.tsx
import { HeaderContent } from "@components";

return;
<>
  <HeaderContent
    title={"articles"}
    routes={articlesSubRoutes}
    actionsRight={
      <Space>
        <Button icon={<SearchOutlined />} onClick={() => alert("Click")} />
      </Space>
    }
  />
  <ArticlesList />
</>;

Create your pagesContainer​

Use the snippet above and only change title and routes in HeaderContent. Then replace <ArticlesList /> by any things you want for now. On the next page,we will see how to create a list element.