Page Layouts

The library provides two page-level layout shells that standardise the structure of list pages and detail/form pages.

PageListView

A two-slot layout for list pages. Place your search/filter controls in topComponent and your table/grid in bottomComponent.

Import

import { PageListView } from "@xocialive/ui-components/layout";

Props

Prop	Type	Description
topComponent	ReactNode	Search, filter bar, or any controls above the table
bottomComponent	ReactNode	Table, card grid, or any content below the controls

Usage

src/modules/items/views/ListItems.tsx

import { PageListView } from "@xocialive/ui-components/layout";
import ItemsSearch from "../components/ItemsSearch";
import ItemsTable from "../components/ItemsTable";
import PageListHeader from "@/components/common/PageListHeader";

const ListItems: React.FC = () => {
  return (
    <PageListView
      topComponent={<ItemsSearch />}
      bottomComponent={
        <>
          <PageListHeader />
          <ItemsTable />
        </>
      }
    />
  );
};

export default ListItems;

---

PageItemView

A minimal shell for detail and form pages. Renders its children directly — title, back navigation, and breadcrumbs are handled inside your form component (e.g. via FormHeader).

Import

import { PageItemView } from "@xocialive/ui-components/layout";

Props

Prop	Type	Description
children	ReactNode	Page content

Usage

src/modules/items/views/CreateItem.tsx

import { PageItemView } from "@xocialive/ui-components/layout";
import ItemForm from "../forms/ItemForm";

const CreateItem: React.FC = () => {
  return (
    <PageItemView>
      <ItemForm />
    </PageItemView>
  );
};

export default CreateItem;

See also

• Layout — outer layout shell
• GenericForm — form with FormHeader for back navigation